web-dev-qa-db-ja.com

divをブラウザウィンドウの幅の100％にする

コンテナの1つを画面の幅の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％に設定すると960pxになります。この問題を回避する方法を確信しているので、助けをいただければ幸いです。

更新：ここに私のJSフィドルがあります： http://jsfiddle.net/VkqjH/

htmlcsssassfullscreen
10
Mike K.

使用できる新しいユニットがあります：

vw-ビューポートの幅

vh-ビューポートの高さ

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

ヘルプ / [〜＃〜] mdn [〜＃〜]

Opera Miniはこれをサポートしていませんが、他のすべての最新ブラウザーで使用できます。

CanIUse

enter image description here

38
Luke
.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;その位置を左上隅に設定します。

4
Christopher 'Solidus' DeJong

width:100%はどんな場合でも機能します。それを使用してください。そうでない場合は、ビューポートの幅の1％に相対的なvwを使用できます。

つまり、幅をカバーしたい場合は、100vw。

ここであなたのために描いた画像を見てください：

enter image description here

以下のように作成したスニペットを試してください：

.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>
1
Alireza