Question

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

我发现原因是宽度：为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>

更新

Here I have added the image showing my problem

隐藏用于版权保护的图片，仅在调整浏览器窗口大小时出现此问题。

再次感谢..

Answer 1

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

在 HTML

中

div

在 CSS

中

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

希望这会对你有帮助......

Answer 2

这将解决您的问题：

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

Answer 3

在我的项目中，我用

解决了它

html {
    overflow-x: hidden;
}

网页右侧的额外空白区域

更新

3 个答案: