The web page is limited by the size of the browser window. There is neither horizontal nor vertical scrolling. To do this, use a wrapper with absolute positioning:

.wrapper { position: absolute; overflow: hidden; top: 5px; left: 5px; bottom: 5px; right: 5px; background-color: #999; }

Inside the cover there is a cap and a container for content.

 .header, .container { position: relative; overflow: hidden; } .header { top: 0; left: 0; right: 0; background-color: #111; } .container { background-color: #333; /* CSS-магия */ }

The cap has no fixed height. When the screen width is changed, the content is not cropped, and the header itself does not fit into the content block.

Question. Is it possible only on CSS to make the content block begin where the header ends and end where the wrapper ends?

Live example on jsfiddle.net

* How to do paired with JS / jQuery - I know. I would like to find a solution (or several) on pure CSS.

    2 answers 2

    You just need to clean up this option for your needs (for example, apply display:table to <body> ), remove unnecessary wrappers, replace .header with <header> ... Well, you know.

    I think there is nothing wrong with splitting a page into sections using a table, this is a lesser evil. But all on the shelves, no feints ears .content { height:100% } . Tables are power.

    Although there is one small nuisance that you stumble upon, it means that you are already confused in the layout: Fox does not put up with position:relative for table-cell-elements (uses the other parent as a guide).

      I just do not understand why you use positioning. I understand you site turns "Gum", use percentages! Example

       <!--wrapper begin--> <div style="width: 100%;"> <!--header begin--> <div style="width: 100%; height: 20%;"> <h1>Place for LOGO</h1> </div> <!--header end--> <!--content-wrapper begin--> <div style="width: 100%; height: 100%;"> <!--content begin--> <div style"float: left; width: 70%;"> <p>site's content</p> </div> <!--content end--> <!--sidebar begin--> <div style="float: right; width: 30%;"> <p>sidebar's content</p> </div> <!--sidebar end--> <div style="clear: both;">&nbsp;</div> </div> <!--content-wrapper end--> </div> <!--wrapper end-->

      It will turn out so that you will transform it automatically!

      • I can do that. But make it so that the cap + wrap in the amount gave 100% of the height of the window. - Denis Khvorostin
      • Should the cap also change its height? - nosensus