当你有一个容器时如何制作全宽答案

【问题标题】：how to make full width when u have a container当你有一个容器时如何制作全宽
【发布时间】：2015-11-15 04:34:38
【问题描述】：

大家好，我需要帮助，我试图使导航全宽，但它在设置宽度为 900 的 div 名称包装器内，我无法想象我该怎么做我不想创建另一个 div，比如我想要的标题我可以在包装器内设置任何内容的全宽以减少编码的方式是 HTML。 P.S 请让代码易于理解，我只是一个新手..

<html>
    <head>
        <title>MY TITLE</title>
        <link rel="stylesheet" href="design.css">
    </head>

    <body>
        <div class="full">
            <div class="box">
                <h1>HEAD</h1>
            </div>
        </div>
            <div class="wrapper">
            <div class="list">
                <ul>
                    <li>Home</li>
                    <li>About Us</li>
                    <li>Contact Us</li>
                </ul>
            </div>
        </div>
    </body>
</html>

这里是 CSS

*{
    padding:0px;
    margin:0px;

}

.wrapper{
    margin:0 auto;
    width:900px;
    border:1px solid red;
    background:green;

}
.full{
    width:100%;
    background:black;

}
.box{
    text-align:center;
    color:red;
    width:500px;
    margin:0px auto;
    background:black;

    }
.list{
    margin:0 auto;
    width:500px;

    }
ul li {
    display:inline;
    list-style-type:none;
    padding-right:30px;
   }

【问题讨论】：

如您希望div 中的类wrapper 比900px 更宽？
挤压比其容器更大的东西是可能的，但在这种情况下这肯定不是最佳实践。你知道你可以有两个包装，对吧？一个是全宽的，其中包含需要 100% 宽度的任何内容，一个内部只有 900 像素。
这不能超过 900 像素，因为元素处于 900 像素的包装之下。它将需要 900px 作为全宽，您可以将固定的顶部 0 定位。但它会始终粘在窗口的顶部。它将是 100% 到窗口。

标签： html css header width footer

【解决方案1】：

尝试使用以下 css -

body { position: relative; }
.list { height: 35px; left: 0; position: absolute; right: 0; top: 38px; width: 100%; }
.list > ul { margin: 0 auto; max-width: 900px; padding: 7px 0; text-align: center; }

由于您希望将内容保存在包装器中并且不添加任何新 div，这对我来说似乎是一个解决方案。

【讨论】：

【解决方案2】：

试试这个。尝试删除width:900px;

或设为width: 100%;

.wrapper{
    margin:0 auto;
    border:1px solid red;
    background:green;

}

【讨论】：

这是在改变他的问题的先决条件，而不是修复它。
我只希望包装器中的某个部分是全宽的，如果我这样做的话，包装器内的所有部分都是 100% 宽度