Question

我需要div栏来占据屏幕的整个宽度。我尝试过使用宽度：1920px;但是如果我改变我的屏幕res它给它一个滚动条。我也试过宽度：100％;但这也不起作用！

CSS

#bar {
    background: white;
    font-family: Designio;
    margin-top: -76px;
    position: absoulte;
    top: 115px;
    padding: 15px;
    height: 60px;
    width: 1930px;
    margin-left: -600px;
    background-size: 100%;
}

body {
    min-width: 768px;
    margin: 0px;
    background: #0e6585;
    font-size: 40px;
}

img.top {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#container {
    height: 768px;
    background: #0e6585;
    font-family: Designio
}

#inner {
    text-decoration: none;
    box-shadow: inset 1px 1px 10px 2px #fff;
    border-radius: 50px;
    margin: 0 auto;
    margin-top: 100px;
    width: 800px;
    height: 600px;
    background: #0e6585;
    padding: 20px;
    color: #946e44;
    text-align: center;
}

#nav a.active {
    background-color: #0e6586;
    color: white;
}

#nav {
    height: 10px;
    width: 100%;
    float: left;
    margin: 0 0 1em 0;
    padding: 0px;
    background-color: white;
    margin-top: -10px;
    border-bottom: 1px solid white;
}

#nav ul {
    list-style: none;
    width: 900px;
    margin: 0 auto;
    padding: 0;
    text-align: center
}

#nav li {
    float: left;
    text-align: center
}

#nav li a {
    margin-top: 15px;
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    color: #0e6585;
    border-right: 1px solid #ccc;
    text-align: center
}

#nav li a:hover {
    color: #0e6586;
    background-color: white;
    text-align: center
}

HTML

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="css/Primary.css">
    </head>
    <body>
        <div id="container">

            <div id="inner">

                <div style="margin-top: -120px">

                    <div id ="bar">
                        <div id="nav">
                            <ul>
                                <li>
                                <li>
                                    <a href="home.html" class="active">Home</a>
                                </li>
                                <li>
                                    <a href="#">About</a>
                                </li>
                                <li>
                                    <a href="#">Graphics</a>
                                </li>
                                <li>
                                    <a href="#">Web Design</a>
                                </li>
                                <li>
                                    <a href="#">Contact</a>
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Answer 1

要获得一个元素来填充视口的宽度，它应该是绝对定位的，只有元素的后代也填充视口的宽度（例如：body，后代div {{ 1}}没有设置宽度），或者它应该是固定位置。然后，该元素需要body和left: 0。

将您的right: 0规则集更改为：

#bar

摘要：

删除所有冗余大小和负边距属性。
修复样式表中的拼写错误 - 将#bar{ background:white; font-family:Designio; position:absolute; left: 0; right: 0; padding:15px; height:60px; background-size:100%; }更改为position: absoulte。
设置position: absolute和left: 0。

演示：http://jsbin.com/ofeful/1/edit

Answer 2

在父级div上使用保证金。

.container
{
    margin-left: 0px;
    margin-right: 0px;
}

小提琴：http://jsfiddle.net/PVKbp/

在另一个明显遗漏的阅读中，你的#bar元素被设置为绝对位于另外两个元素中。您需要将其从容器中取出（除非您需要将其放在容器中），以便left: 0; right: 0正常工作。如果您需要它在容器内，您还需要使用上面的边距属性扩展容器。

Answer 3

您可以使用width:*;。这应该会占据整个屏幕的宽度。

如何制作横幅占据屏幕CSS的整个宽度

3 个答案: