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

我需要Div栏来占据屏幕的整个宽度。我尝试使用宽度：1920px；但是，如果我更改屏幕，则它会给它一个滚动条。我也尝试过宽度：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>

要获取一个元素以填充视口的宽度，它应该是绝对放置的，并且仅是元素的后代，这些元素也填充了视口的宽度（例如：body，后代，body的divsdivsdivsdivsdivsdivsdivsdivsdivsdivs of设置宽度），或者应为固定位置。然后，该元素需要具有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和right: 0。

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

在您的父母div上使用保证金

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

小提琴：http：//jsfiddle.net/pvkbp/

在另一个大遗漏的读取中，您的#bar元素将绝对放置在其他两个元素之内。您需要将其从容器中取出（除非需要放置在容器中），以使left: 0; right: 0能够正常工作。如果您需要它在容器内，则还需要使用上面的余量属性扩展容器。

您可以使用width:*;。那应该使它占据整个屏幕。

相关内容

最新更新

热门标签：