网页右侧的额外空白区域答案

【问题标题】：Extra white space on right hand side on webpage网页右侧的额外空白区域
【发布时间】：2019-03-06 09:39:00
【问题描述】：

我开发了一个网站，它运行良好。只是当我在较小的窗口上查看时，右侧会出现一个空白。

我发现原因是为 div=middle 设置的宽度：76%。我尝试使用填充删除宽度并调整中间布局。同样，它需要 76% 的宽度才能固定。然而，额外的空间出现了。

如何摆脱它？在这里，我附上了我的脚本的 css 部分和 html。提前致谢。

CSS：

body {
    font-family: Calibri;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.wrapper {
    min-height: 100%;
    position: absolute;
}
.left {
    background-image: url('images/SideTexture_01.png');
    background-repeat: repeat-y;
    width: 12%;
    height: 100%;
    position: absolute;
}
.middle {
    width: 76%; /* deactivated to remove extra space on right side */
    height: 100%;
    position: relative;
    float: right;
    margin-right: 12%;
    padding-left: 12%;
    z-index: 99px;
}
.header {
    background-color: #cf2122;
    width: 100%; /*774*/
    height: 30px;
    position: relative;
}
.footer {
    background-color: #373435;
    width: 100%; /*774*/
    height: 40px;
    text-align: justify;
    margin: 0 auto;
    clear: both;
}
.border {
    border: 1px solid #DFDFDF;
    padding: 5px;
}
.border-index {
    border: 1px solid #EAEAEA;
    padding: 10px;
}
.right {
    background-image: url('images/side_texture-2.png');
    background-repeat: repeat-y;
    width: 12%;
    height: 100%;
    position: absolute;
    float: left;
    z-index: -1;
    margin-left: 88%;
}
.disclaimer {
    color: #FFF;
    float: left;
    font-size: 9px;
    width: 60%;
    text-align: justify;
    padding-left: 10px;
    padding-top: 2px;
}
.copyright {
    color: #FFF;
    float: right;
    font-size: 9px;
    position: relative;
    float: right;
    width: 31%;
    padding-top: 15px;
}
A.menu-top:link {
    COLOR: #FFFFFF;
    TEXT-DECORATION: none;
    FONT-WEIGHT: none;
    FONT-FAMILY: Calibri;
    FONT-SIZE: 13px;
    text-transform: uppercase;
}
A.menu-top:active {
    COLOR: #FFFFFF;
    TEXT-DECORATION: none;
    FONT-WEIGHT: none;
    FONT-FAMILY: Calibri;
    FONT-SIZE: 13px;
    text-transform: uppercase;
}
A.menu-top:visited {
    COLOR: #FFFFFF;
    TEXT-DECORATION: none;
    FONT-WEIGHT: none;
    FONT-FAMILY: Calibri;
    FONT-SIZE: 13px;
    text-transform: uppercase;
}
A.menu-top:hover {
    COLOR: #FFFFFF;
    text-decoration: underline;
    FONT-WEIGHT: none;
    FONT-FAMILY: Calibri;
    FONT-SIZE: 13px;
    text-transform: uppercase;
}
.separate {
    font-size: 15px;
    color: #FFFFFF;
    FONT-FAMILY: Calibri;
}
A.menu:link {
    COLOR: #fff;
    TEXT-DECORATION: none;
    FONT-WEIGHT: none;
    FONT-FAMILY: Calibri;
    FONT-SIZE: 13px;
    text-transform: uppercase;
}
A.menu:active {
    COLOR: #fff;
    TEXT-DECORATION: none;
    FONT-WEIGHT: none;
    FONT-FAMILY: Calibri;
    FONT-SIZE: 13px;
    text-transform: uppercase;
}
A.menu:visited {
    COLOR: #fff;
    TEXT-DECORATION: none;
    FONT-WEIGHT: none;
    FONT-FAMILY: Calibri;
    FONT-SIZE: 13px;
    text-transform: uppercase;
}
A.menu:hover {
    COLOR: #fff;
    text-decoration: underline;
    FONT-WEIGHT: none;
    FONT-FAMILY: Calibri;
    FONT-SIZE: 13px;
    text-transform: uppercase;
}
#body_content {
    padding: 0px;   
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background: #000000;
    padding-top: 12px;
    padding-bottom: 0px;
}
.require {
    font-family: Calibri;
    font-weight: bold;
    color: #CC0000;
}
td {
    font-family: Calibri;
    font-size: 12px;
    color: #3a3a3a;
}
th {
    font-family: Calibri;
    color: #3a3a3a;
}
.input {
    border: 0;
    color: #3a3a3a;
    font-size: 10px;
    text-align: left;
}
.input_contact {
    border: 1px solid #999999;
    background-color: #F6F7F1;
    color: #3a3a3a;
    height: 15px;
    font-size: 12px;
    width: 234px;
}
@media only screen and (max-width: 1280px) {
    td.search {
        width: 425px;
    }
}
@media only screen and (min-width: 1197px) {
    td.search {
        width: 180px;
    } 
}
@media only screen and (min-width: 1289px) {
    td.search {
        width: 170px;
    }
}
@media only screen and (min-width: 1346px) {
    td.search {
        width: 120px;
    }
    .copyright {
        width: 23%;
    }
    .body-content {
        padding-right: 250px;
    }
}
.textarea {
    border: 1px solid #999999;
    background-color: #F6F7F1;
    color: #3a3a3a;
    font-size: 12px;
}
.star {
    font-family: Tahoma;
    color: red;
    font-size: 16px bold;
}
.notice {
    font-family: Tahoma;
    color: #0066FF;
    font-size: 14px bold;
}
.error {
    font-family: Tahoma;
    color: #CC0000;
    font-size: 14px bold;
}
.require {
    font-family: Tahoma;
    font-weight: bold;
    color: #CC0000;
}
.about-us-image {
    width: 99%;
    height: 40%;
    background-image: url('images/AboutUsBg_01.png'),url('images/AboutUsBg_01.png'),url('images/AboutUsBg_01.png');
    z-index: -1;
}

HTML：

<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginheight="0">
    <div class="wrapper">
        <div class="left"></div>
        <div class="middle">
            <div class="header top_menu"><?php include 'top-menu.php'; ?> </div>
            <div id="body_content">
                <table height="600" border="0" cellspacing="0" cellpadding="0" align="left">
                    <tr>
                        <td>
                            <table height="600" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td>
                                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                            <tr>
                                                <td style="padding-top:10px; padding-left:50px; padding-right:50px; padding-bottom:230px; text-align:justify;">
                                                    <?php include('product-include.php'); ?>
                                                    <br />  <br />
                                                    <?php echo $row_RecTitle['FullTxt']; ?>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="footer" style="top:628px;">
                <?php include('footer.php'); ?>
            </div>
            <div class="right"></div>
        </div>
</body>

更新

出于版权目的隐藏图片，仅当浏览器窗口调整大小时才会出现此问题。

再次感谢..

【问题讨论】：

请同时发布html代码
您需要发布所有的 HTML 代码。如果需要，请呈现您的网站，然后查看源代码并复制生成的 HTML。请与 CSS 分开包含它。
我觉得你做很多复杂的 CSS 只是为了获得居中对齐的内容。我看到您的左右有 2 张图像；您可以通过在主体上放置背景图像然后有一个居中的 div 来简化网站吗？ stackoverflow.com/questions/953918/…
@WhiteboardDev 我想将左右图像添加为一个背景图像，但问题是左侧图像向左渐变，右侧图像向右渐变。我'我无法通过将它们作为整个背景图像来产生这种效果。这里的渐变是指，图像在左侧和右侧的可见度分别较低。
@MujtabaFathel 我添加了截图..

标签： html css

【解决方案1】：

在我的项目中，我用这个解决了它

html {
    overflow-x: hidden;
}

【讨论】：

【解决方案2】：

试试这个 .. 我认为这是做你想做的最简单的方法。您可以创建一个div，它将作为背景的右侧，另一侧将是同一div 的::before 选择器 ...

在 HTML

中

<body>
    <div class="bg"></div>
    <div class="middle">
        // Some HTML Text
    </div>
</body>

在CSS

中

body{
    margin: 0;
    padding: 0;
}
.bg::before{ 
    content:" ";
    top: 0;
    left: 0;
    width: 12%;
    height: 100%;
    background-image: url('images/SideTexture_01.png');
    background-repeat: repeat-y;
    position: fixed;
    z-index: 1;
}

.bg{
    top: 0;
    right: 0;
    width: 12%;
    height: 100%;
    background-image: url('images/SideTexture_02.png');
    background-repeat: repeat-y;
    position: fixed;
    z-index: 1;
}

.middle{
    background: #fff;
    margin: auto;
    width: 76%;
    position: relative;
    z-index: 10;
}

希望对您有所帮助...

【讨论】：

我确实添加了
但没有帮助:(

我照你说的做了还是一样

感谢您的帮助，但无论我如何更改右侧的额外空间都不会消失。

【解决方案3】：

这将解决您的问题：

html,body{
  margin:0;
  padding:0;
  overflow:auto;
  width:100%;
}

【讨论】：