Đặt div 100% Chiều rộng của Cửa sổ Trình duyệt

Tôi đang cố gắng tạo một trong các vùng chứa của mình 100% chiều rộng của màn hình.Đặt div 100% Chiều rộng của Cửa sổ Trình duyệt

Đây là Sass tôi

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; 
     } 
    } 
}

Và 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>

Tôi muốn # neo_main_container1 được toàn bộ chiều rộng của màn hình. Rõ ràng vì nó là con của #neo_wrapper, việc thiết lập chiều rộng là 100% sẽ làm cho nó là 960px. Tôi chắc chắn làm thế nào để phá vỡ vấn đề này, vì vậy bất kỳ trợ giúp sẽ được đánh giá cao.

Cập nhật: Đây là fiddle JS của tôi: http://jsfiddle.net/VkqjH/

Nguồn

2014-07-17 Mike K.

Có đơn vị mới mà bạn có thể sử dụng:

vw - viewport rộng

vh - Chiều cao khung nhìn

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

Help/MDN

Opera Mini không hỗ trợ tính năng này, nhưng bạn có thể sử dụng nó trong tất cả các trình duyệt hiện đại khác.

CanIUse

Nguồn

2014-07-17 16:18:34 Luke

Yếu tố sẽ có một phần nội dung của nó bị ẩn ở đâu đó trong phạm vi gốc, trừ khi cha mẹ có cuộn. – melancia

Ông chỉ yêu cầu kích thước: P – Luke

Tôi biết, nhưng nó an toàn để giả định những gì OP muốn. Họ đã sử dụng 'width: 100%'. – melancia

Cố gắng cung cấp cho nó một postion: tuyệt đối;

Nguồn

2014-07-17 16:18:53

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

Về cơ bản, chúng tôi đang sửa chữa vị trí của div bất kể đó là cha mẹ, và sau đó vị trí của nó sử dụng margin: 0 auto; và thiết lập vị trí của nó ở góc trên cùng bên trái.

Nguồn

2014-07-17 16:22:42

Hoàn toàn định vị div đó dường như loại bỏ nội dung tôi có trong vùng chứa thứ hai của mình –

Sau đó, nó có thể nằm trên một lớp chỉ mục z khác. Hãy thử điều chỉnh chỉ mục z bằng cách thêm 'z-index: 300;' cho div thấp hơn, và sau đó làm điều tương tự nhưng cung cấp cho nó chỉ số z là 350 cho giá trị cao hơn. –

Dường như không làm bất cứ điều gì (đã cho # neo_main_container1 một chỉ mục z 350 và # neo_main_container2 z-index là 300) –

-1

Đã có thể hình dung nó ra sử dụng JavaScript

var winHeight = 0; /* Window height */ 
var winWidth = 0; /* Window width */ 


$(document).ready(function() { 


setContainerDims(); 


function setContainerDims(){ 
    winHeight = parseInt($(window).height()); 
    winWidth = parseInt($(window).width()); 

    $("#neo_home_container").css({"width":winWidth,"height":winHeight}); 
} 



$(window).resize(function(){ 
    setContainerDims(); 
}) 

});

Nguồn

2014-07-22 14:39:45

Nếu width:100% tác phẩm trong bất kỳ trường hợp, chỉ cần sử dụng đó, nếu không bạn có thể sử dụng vw trong trường hợp này đó là so với 1% độ rộng của khung nhìn .

Điều đó có nghĩa là nếu bạn muốn che phủ chiều rộng, chỉ cần sử dụng 100vw.

Nhìn vào hình ảnh tôi vẽ cho bạn đây:

Hãy thử đoạn tôi đã tạo cho bạn như sau:

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

Nguồn

2017-06-16 07:06:39 Alireza

Đặt div 100% Chiều rộng của Cửa sổ Trình duyệt

Trả lời

Các vấn đề liên quan