如何使div调整大小以填充整个浏览器窗口？

Question

Please go here: http://demo.thecogworks.co.uk/umbraco/login.aspx

Login with this account: User: demo Password: password

Now try to resize the browser window and see the divs resize with the browser window. I suppose it doesn't work with only css. Am I correct? How can I create something like that?

Answer 1

It does work with only css (and may be also with "viewport" meta tag if you want it to be shown properly on mobile devices.).

If you want your html page behave like that you have to use % as width(width:100% for example). In this case width of the div will be based (related to) on the size of the viewport.

It's so called flexible layout. And It's a one of the element on the way to create responsive web pages.

You can read more here :

• http://www.flexiblewebbook.com . (it's a book about different types of layout)
• http://alistapart.com/article/responsive-web-design (as a start of the way)

Answer 2

You are correct, the page in your supplied example is not using plain css, but uses javascript to render the css on window resize.

A line from your example (with inline styling in the html output):

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

So all the measures in the example document styling are assigned with absolute units - in px, and do not adjust on browser window resize. So in terms to resize it uses something like

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

to get the new browser window width and similar for hight

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

and the function

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

is then applied to the treeWindow object

resizeGuiWindow("treeWindow",leftWidth,treeHeight);

This you can find in the source code of your example page. However, you can do that all just in css, by using relative units in the style.

Read more on responsive design, adaptive css and fluid layouts.

Edit: I posted the answer almost at the same time as Georgii. Even though he did not directly answer the question about your example page, all he says is right and he added some good sources on flexible layouts, where you can find all info to build a similar page only with css.

Answer 3

After resaerching on fluid layout, I finally be able to create the whole layout in CSS (no javascript). Here's the working version in jsfiddle: http://jsfiddle.net/Yv4ja/ for anyone who might need it later:

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>