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

Question

i need the div bar to take up the whole width of the screen. 我需要div栏来占据屏幕的整个宽度。 I've tried using width:1920px; 我尝试过使用宽度：1920px; but then if i change my screen res it gives it a scroll bar. 但是如果我改变我的屏幕res它给它一个滚动条。 I've also tried width:100%; 我也试过宽度：100％; but that didn't work either! 但那也不起作用！

CSS 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 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

To get an element to fill the width of the viewport, it should either be absolutely positioned, and a descendant only of elements which also fill the width of the viewport (eg: body , descendant divs of body which do not have set widths), OR it should be fixed position. 为了得到一个元素来填充该视口的宽度，它要么应绝对定位，并且仅元件，其还填充视口的宽度的后代（例如： body ，的后代的div body不具有设定宽度），或者它应该是固定的位置。 Then, the element needs to have left: 0 and right: 0 . 然后，元素需要left: 0和right: 0 。

Change your #bar ruleset to this: 将#bar规则集更改为：

#bar{
    background:white;
    font-family:Designio;
    position:absolute;
    left: 0;
    right: 0;
    padding:15px;
    height:60px;
    background-size:100%;      
}

summary: 摘要：

Remove all redundant sizing and negative margin properties. 删除所有冗余大小和负边距属性。
Fix the typo in your stylesheet - change position: absoulte to position: absolute . 修复样式表中的拼写错误 - 更改position: absoulte到position: absolute 。
Set left: 0 and right: 0 . 设置为left: 0和right: 0 。

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

Answer 2

Use margin on your parent div. 在父div上使用保证金。

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

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

In another blaring omission of reading, your #bar element is set to position absolutely within two other elements. 在另一个明显的阅读遗漏中，你的#bar元素被设置为绝对位于另外两个元素中。 You'll need to take it out of the the container (unless you need it positioned within the container) in order for left: 0; right: 0 您需要将其从容器中取出（除非您需要将其放置在容器内）以便left: 0; right: 0 left: 0; right: 0 to work properly. left: 0; right: 0才能正常工作。 If you need it to be within the container, you'll also need to extend the container using the margin properties above. 如果您需要它在容器内，您还需要使用上面的margin属性扩展容器。

Answer 3

You could use width:*; 你可以使用width:*; . 。 That should make it take up the whole screen in width. 这应该使它占据整个屏幕的宽度。

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

问题描述

3 个解决方案

解决方案1
4 已采纳 2012-10-26 19:22:17

解决方案2
1 2012-10-26 19:16:06

解决方案3
-1 2013-12-02 23:40:10

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

问题描述

3 个解决方案

解决方案1 4 已采纳 2012-10-26 19:22:17

解决方案2 1 2012-10-26 19:16:06

解决方案3 -1 2013-12-02 23:40:10

解决方案1
4 已采纳 2012-10-26 19:22:17

解决方案2
1 2012-10-26 19:16:06

解决方案3
-1 2013-12-02 23:40:10