将 div 设为浏览器窗口的 100% 宽度答案

【问题标题】：Make div 100% Width of Browser Window将 div 设为浏览器窗口的 100% 宽度
【发布时间】：2026-01-16 04:00:02
【问题描述】：

我正在尝试将我的容器之一设为屏幕宽度的 100%。

这是我的 SASS

body, html { 
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

#neo_wrapper {  
    width: 960px;
    height: 1500px;
    margin: 0 auto;

    #neo_main_container1 {  /* Slide1 container */
        width: 100%;
        height: 100%;
        margin: 0 auto;
        background: #999999;
        z-index: 350;

        #neo_scroll_button {    /* Div that enables scroll */
            position: absolute;
            bottom: 35px;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 150px;
            height: 15px;
            background: #F00;
            color: #FFF;
            text-align: center;
            line-height: 15px;
            display: table; 

            a { 
                &:link {text-decoration: none; color: #FFF;}
                &:visited {text-decoration: none; color: #FFF;}
            }
       }
    }

     #neo_main_container2 {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        background: #CCC;
        z-index: 300;

        #neo_img_container {
           float: left;
           width: 350px;
           height: 500px;
            margin: 0 auto;
            margin-right: 15px;
         }

        #neo_text_container {
            float: left;
            width: 50%;
            height: 500px;
            margin: 0 auto;
        }
    }
 }

和 HTML

<body>
<div id="neo_wrapper">
    <div id="neo_main_container1">  <!-- Start container1 -->
        <div id="neo_scroll_button" onClick="scrollBelow()">
            <p>Enter</p>
        </div>
    </div>  <!-- End of container1 -->
    <div id="neo_main_container2">  <!-- Start container2 -->
        <div id="neo_img_container">
            <img src="http://fpoimagery.com/?t=px&w=350&h=250&bg=0ff&fg=000000" />
        </div>
        <div id="neo_text_container">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>  <!-- End container2 -->
</div>

我希望 #neo_main_container1 是屏幕的全宽。显然，因为它是#neo_wrapper 的子对象，将宽度设置为 100% 将使其变为 960 像素。我确定如何规避此问题，因此将不胜感激。

更新：这是我的 JS 小提琴：http://jsfiddle.net/VkqjH/

【问题讨论】：

标签： html css sass fullscreen

【解决方案1】：

您可以使用新的单位：

vw - 视口宽度

vh - 视口高度

#neo_main_container1
{
   width: 100%; //fallback
   width: 100vw;
}

Help/MDN

Opera Mini 不支持此功能，但您可以在所有其他现代浏览器中使用它。

CanIUse

【讨论】：

该元素的部分内容将隐藏在其父元素的某个位置，除非父元素有滚动条。
他只要求尺码：P
我知道，但假设 OP 想要什么是安全的。他们已经在使用width: 100%。
我只添加了不支持100vw的浏览器。如果能见度是一个问题，并且他提出了这个问题，我将编辑我的答案。父元素都没有overflow: hidden，所以它们不会扩展吗？
Luke，您能否解释一下，width: 100% 用于 body 和 html 元素的可能用途是什么？是的，我理解，从实际的角度来看，body { margin: 0; } 在大多数情况下应该足够了。我只是想了解的更透彻。

【解决方案2】：

.myDiv {
    background-color: red;
    width: 100%;
    min-height: 100vh;
    max-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 auto;
}

基本上，我们固定 div 的位置 不管它是父级，然后使用 margin: 0 auto; 定位它并将其位置设置在左上角。

【讨论】：

绝对定位那个 div 似乎摆脱了我在第二个容器中的内容
那么它可能在不同的 z-index 层上。尝试通过为较低的 div 添加 z-index: 300; 来调整 z-index，然后做同样的事情，但为较高的 div 设置一个 350 的 z-index。
似乎什么也没做（给 #neo_main_container1 的 z-index 为 350，#neo_main_container2 z-index 为 300）
一会儿我会亲自看看。如果可以的话，请用小提琴更新您的帖子并节省我的时间。
刚刚意识到我实际上并没有添加小提琴，只是将它添加到我的帖子末尾。有空请看一下

【解决方案3】：

如果width:100% 在任何情况下都有效，请使用它，否则您可以在这种情况下使用vw，它相对于视口宽度的 1%。

这意味着如果你想遮住宽度，只需使用100vw。

看看我在这里为你画的图：

试试我为你创建的 sn-p 如下：

.full-width {
  width: 100vw;
  height: 100px;
  margin-bottom: 40px;
  background-color: red;
}

.one-vw-width {
  width: 1vw;
  height: 100px;
  background-color: red;
}

<div class="full-width"></div>
<div class="one-vw-width"></div>

【讨论】：

【解决方案4】：

试着给它一个位置：绝对的；

【讨论】：

【解决方案5】：

将 body 的边距设置为 0，这将修复它。

body {
   margin: 0;
}

【讨论】：