如何使div大小填充整個瀏覽器窗口？

Question

請到這裏： http://demo.thecogworks.co.uk/umbraco/login.aspx

登錄此帳戶： 用戶：演示 密碼：password

現在嘗試調整瀏覽器窗口，看到的div瀏覽器窗口大小調整。我想它不適用於只有CSS。我對麼？我該如何創建類似的東西？

Answer 1

它只適用於css（如果您希望它在移動設備上正確顯示，也可以使用「視口」元標記）。

如果你希望你的html頁面的行爲像你必須使用％作爲寬度（例如寬度：100％）。在這種情況下，div的寬度將基於（相關於）視口的大小 。

這就是所謂的靈活佈局。這是創建響應式網頁的途徑之一。

你可以在這裏閱讀更多：

• http://www.flexiblewebbook.com。 （這是一本關於不同類型的佈局）
• http://alistapart.com/article/responsive-web-design（作爲的方式開始）

Answer 2

你是正確的，在你提供的示例頁面不使用純CSS，但使用JavaScript來渲染調整窗口大小的CSS。

從你的榜樣的線（與聯樣式在HTML輸出）：

<div id="treeWindow" class="panel" style="height:380px;width:200px;"> 

所以在示例文檔樣式的所有措施都分配有絕對單元 - 像素，也不要在瀏覽器中調整窗口大小調整。因此，在術語來調整它使用類似於

var clientWidth=jQuery(window).width(); 
var leftWidth=parseInt(clientWidth*0.25); 

，以獲得新的瀏覽器窗口寬度和HIGHT

var clientHeight=jQuery(window).height()-48; 
var treeHeight=parseInt(clientHeight-5); 

和功能，那麼

function resizeGuiWindow(windowName,newWidth,newHeight,window){ 
    resizePanelTo(windowName,false,newWidth,newHeight); 
} 

應用到treeWindow相似物體

resizeGuiWindow("treeWindow",leftWidth,treeHeight); 

這可以在示例頁面的源代碼中找到。 但是，你可以通過在樣式中使用相對單位來完成所有這些。

閱讀有關響應式設計，自適應CSS和流體佈局的更多信息。

編輯：我幾乎與Georgii同時發佈了答案。儘管他沒有直接回答關於您的示例頁面的問題，但他所說的都是正確的，他在靈活的佈局中添加了一些很好的來源，您可以在其中找到所有信息以僅使用css構建類似的頁面。

Answer 3

在流體佈局上重新進行操作後，我終於可以在CSS（無javascript）中創建整個佈局。下面是的jsfiddle工作版本：http://jsfiddle.net/Yv4ja/的人誰以後可能需要它：

CSS：

.left{ 
    position:absolute; 
    width:30%; 
    background:red; 
    left:0; 
    bottom:0px; 
    top:100px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.right{ 
    overflow:hidden; 
    background:green; 
    position:absolute; 
    right:0; 
    width:70%; 
    bottom:0px; 
    top:100px; 
} 

html, body{ 
    min-height:100%; 
    height:100%; 
    padding:0px; 
    margin:0px; 
    position:relative; 
} 



.header{ 
    width:100%; 
    height:100px; 
    background:yellow; 
} 

.left .content { 
    background:blue; 
    position:absolute; 
    top:5px; 
    left:5px; 
    right:5px; 
    bottom:100px; 
    overflow:auto; 
    padding:5px; 
    border:1px solid yellow; 
} 

.left .bottom-content { 
    height:100px; 
    position:absolute; 
    left:5px; 
    right:5px; 
    bottom:5px; 
    background:black; 
} 

HTML：

<div class="header">header</div> 
<div class="wrapper"> 
    <div class="left"> 
     <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquam adipiscing augue a porta. Sed fringilla sodales nisl ut iaculis. Aenean eu arcu lectus. Vivamus ut felis nibh, eu rutrum magna. In auctor varius ullamcorper. In diam turpis, ornare id pellentesque at, blandit et magna. Integer eget dolor tortor, sed vehicula magna. Quisque metus turpis, mollis porta feugiat vel, condimentum in eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu mi est, vel euismod velit. Vestibulum ante odio, molestie ut imperdiet eget, aliquet nec elit. Aenean arcu massa, vestibulum eu convallis ut, porttitor ut orci. Fusce eget sem augue, vitae placerat velit. Suspendisse interdum, nulla eget pharetra cursus, nunc elit iaculis nisl, vitae fringilla massa purus nec nunc. Quisque rutrum ornare turpis quis blandit. Mauris venenatis convallis elementum. 

Etiam ut magna dolor. Sed eget purus ut nulla feugiat egestas. Quisque quam ligula, dapibus non cursus quis, commodo at quam. Vivamus porttitor, urna nec ultricies scelerisque, massa purus congue ligula, in egestas lectus magna eget est. Ut commodo viverra augue non semper. Suspendisse potenti. In mollis ultrices posuere. Integer mollis, lacus et pretium molestie, elit felis tincidunt elit, at pellentesque turpis diam lacinia quam. 

Aenean vehicula, lorem et adipiscing molestie, orci nisl vulputate dui, et tempor erat nibh eget dolor. Nullam posuere lorem eu diam imperdiet et molestie arcu lobortis. Mauris vestibulum mollis lacus non imperdiet. Morbi tortor tortor, pulvinar nec viverra vitae, laoreet nec urna. Quisque in urna turpis. Nullam vel diam dui. Nunc scelerisque, arcu id pulvinar consectetur, purus elit euismod justo, in convallis lacus nisi vel velit. 

Aliquam porttitor condimentum sapien at consectetur. Integer ac diam id felis semper pretium. Integer elementum venenatis nunc, ac molestie mauris suscipit sed. Nunc porttitor eleifend ipsum, sit amet ornare lacus dapibus a. Integer adipiscing, quam sed malesuada vehicula, eros erat egestas quam, eu rutrum sem turpis sit amet elit. Pellentesque metus nisl, malesuada et sagittis at, molestie a sapien. Duis vestibulum porta lacus et ultrices. 

In auctor vulputate vestibulum. Integer porta quam ante, sed molestie leo. Aliquam cursus enim in augue euismod id porta eros gravida. Mauris lectus ipsum, luctus sit amet consectetur non, venenatis eget ligula. Suspendisse potenti. Vestibulum consequat accumsan orci ut lobortis. Maecenas velit diam, dapibus sit amet tincidunt eu, cursus in erat. Phasellus ac interdum lectus. Phasellus placerat, lacus vitae condimentum placerat, nisl dui varius ipsum, in eleifend metus diam sit amet libero. Vestibulum nec dolor at augue malesuada vestibulum. Praesent euismod, nibh a imperdiet convallis, est leo cursus elit, nec interdum ipsum mauris id urna. Integer at augue diam. Suspendisse tincidunt accumsan porta. Sed vehicula imperdiet velit et sagittis.</div> 
     <div class="bottom-content"></div> 
     </div> 

    <div class="right">right</div> 
</div>