All geek questions in one place

How to achieve the following in HTML?

I want to have a page with a fixed height (no scrollbars). Then under the heading is the height of the liquid height, which has a scroll bar (and not the entire page). In addition, the width should be fluid throughout the page.

This is shown below: A layout image with a fixed-height header followed by a scroll area http://img709.imageshack.us/img709/9242/tmphh.png

What should I do in HTML so that it works in all browsers, including IE6?

EDIT: CODE CHANGED, works in IE6, Firefix, Chrome, however IE6 shows 4 scrollbars !!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
    HTML,BODY
    {
        height:100%;
    }
    .fullContainer
    {
        width:80%;
        height:40%;
        overflow:auto;
        position:relative;
    }

    /*-- Can only modify these --*/
    .header
    {
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 100%; 

        height:40px;
        background-color:#eeeeee;
    }
    .content
    {
        position: absolute; 
        top: 40px;
        left: 0;
        right: 0;
        bottom: 0;

        overflow:auto;
    }
    .contentContainer
    {
        height:100%;
    }
    * html .fullContainer{ /*IE6 hack*/
        padding: 40px 0 0 0;
    }
    * html .content{ /*IE6 hack*/
        height: 100%; 
        width: 100%; 
    }
    /*-- Can only modify these --*/
</style>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div>before content...</div>
<div class="fullContainer">
    <div class="header">Header</div>
    <!-- <div class="contentContainer"> -->
        <div class="content">
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.This is scroller content.
            <div style="width:1000px;background-color:#ccffcc;">long text</div>
        </div>
    <!-- </div> -->
</div>
<div>after content...</div>

</body>
</html>
+3
source share
4 answers

, div, , div ( - , ), . ( - .) . div , height overflow-y:scroll.

, div, , div . :

#bottomDiv {
  position: absolute;    
  top: 100px; /* however tall your top div is */
  left: 0;
  right: 0;
  bottom: 0;
}

, IE6 ( , ).

.fullContainer? , , . CSS, , . , fullContainer ( , CSS), , , div, (width:auto height:auto) reset (, overflow:hidden ).

- () , divs, position:fixed, , , , , .

2. IE6 100% , , . , " IE5 IE6" - , , .

+4

:

div.header {position: fixed;}

div , div.

+2

?

HTML

<body>
    <div id="header">

    </div>

    <div id="wrapper">

    </div>
</body>

CSS

    *{padding:0;margin:0}
    body{overflow:hidden}
    #header,#wrapper{width:100%}
    #header{position:fixed;top:0;left:0;height:100px;background-color:#F00}
    #wrapper{position:fixed;height:100%;margin-top:100px;overflow:scroll}
+1

,

<body style="margin:0;width:100%; height:100%; overflow:hidden;">
  <div id="HeaderDiv" style="width:100%; height:100px; overflow:hidden; float:left;">
  </div>
  <div id="FluidDiv" style="width:100%; height:100%; overflow:scroll; float:left;">
  </div>     
</body>
+1
source

Source: https://habr.com/ru/post/1736601/

More articles:


All Articles