Question

我正在尝试制作一个与屏幕宽度相同的div元素，这样我可以让背景的一部分颜色与其余颜色不同。我更希望它是相对位置，因为绝对我必须手动设置它的垂直位置，并且它会变得混乱，尽管滚动条不会出现。

现在，我确实拥有它以便div占据屏幕区域并且可以是不同的颜色，但它会导致滚动条出现。使用

将div放在屏幕的右侧

margin-right: -21px;

但是这会导致滚动条。如果我删除它，条形图会消失，但屏幕右侧会有一部分空格。使用

overflow-x: hidden;

会隐藏滚动条，但不会阻止水平滚动。

如何制作滚动条不会出现，我无法水平滚动？我目前正在使用JSFiddle。

提前感谢您提供有关如何解决此问题的任何建议。

Answer 1

虽然有一些事情你应该修复，从身体中移除边距，html将起到作用。

摆脱-21边距，只需添加此样式。

body, html {
    margin: 0;
}

这是你的fiddle。

Answer 2

可能有用的脏技巧：

<!DOCTYPE html >
 <html>
   <head>
     <title> Bla! </title>
    <style>
        div.fullWidth { display:inline-block; width:100%; background-color:yellow }
        div.body { position:absolute; left:0px;  top:0px; background-color:green; width:100%; height:100%; overflow:auto}
        body { overflow:hidden; }
    </style>
   </head>
   <body>
        <div class='body'>
            line before the div
            <div class='fullWidth'> Line inside div</div>
            line after div
        </div>
   </body>
 </html>

不会导致滚动条的全宽div

2 个答案: