fixed top
All geek questions in one place

Simple css height

Stuck while trying to make an element on a website this way:

<div class="for100procHeight">
  <div class="header">fixed top</div>
  <div class="content">long text with scrolling content</div>
  <div class="footer">fixed bottom</div>
</div>

Quick css height reminder:

  • The percentage is calculated using the relative height of the generated block containing the block.
  • If it has child blocks, height is the distance between the upper boundary edge of the upper block child window <...>
  • However, if the element has a nonzero upper complement and / or upper border, or is the root element, then the content starts from the top edge of the top child’s edge <...>

The optimistic decision was:

.for100procHeight { height: 100%; }
.header, .footer { height: 20px; }
.content { height:100%; overflow:scroll; }
/* failed badly: footer didn't fit into the window (heightwise) */

With diminished optimism, another attempt was made:

<div class="for100procHeight">
  <div class="header">fixed top</div>
  <div class="footer">fixed bottom</div>
  <div class="wrapper">
    <div class="content">long text with scrolling content</div>
  </div>
</div>

.for100procHeight { height: 100%; }
.header, .footer { position: absolute; height: 20px; }
.content { height:100%; overflow:scroll; }
.header { top: 0px; left: 0px; }
.footer { bottom: 0px; left: 0px; }
.wrapper { padding-top: 20px; padding-bottom: 20px; }
/* failed badly: scroll down arrow was behind footer */
/* failed badly: scroll down arrow didn't fit into the window (heightwise) */

, , , 100% ( , ). /// .. .

CSS, JS / .

Edit:

complex-height-in-css

---------------------------------------
| fixed top |   | fixed top |        |
|-----------|   |-----------|        |
|  long   |^|   |  long   |^|        |
|  text   |_|   |  text   |_|        |
|  with   |_|   |  with   |_|        |
|scrolling| |   |scrolling| |        |
| content | |   | content | |        |
|-----------|   |-----------|        |
| fixed bott|   | fixed bott|        |
--------------------------------------

, , <div class="for100procHeight"> .

:

<html>
<head>
    <style>
    html, body {
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }
    .page {
        position: absolute;
        height: 100%;
        width: 100%;
    }
    .content {
        width: 100%;
        height: 100%;
        overflow: scroll;
        overflow-x: hidden;
    }
    .content .inner {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .top {
        width: 100%;
        margin-left: -17px;
        position: absolute;
        top: 0px;
        left: 0px;
        height: 30px;
        background: url('background.gif');
    }
    .bottom {
        width: 100%;
        margin-left: -17px;
        position: absolute;
        left: 0px;  
        bottom: 0px;
        height: 30px;
        background: url('background.gif');
    }
    .top span, .bottom span {
        padding-left: 17px;
        z-index: 2000;
    }
    .top span, .bottom span {
        display: block;
        width: 100%;
    }

    #list2.page {
        margin-left: 110%;
    }
    </style>
</head>
<body>
    <div id="list1" class="page">
        <div class="top"><span>top</span></div>
        <div class="bottom"><span>bottom</span></div>
        <div id="listContent" class="content">
            <a id="page1" name="page1" style="width:1px;"></a>
            <div class="inner">
            ...
            </div>
        </div>
    </div>
    <div id="list2" class="page">
        <div class="top"><span>top</span></div>
        <div class="bottom"><span>bottom</span></div>
        <div id="listContent" class="content">
            <a id="page2" name="page2" style="width:1px;"></a>
            <div class="inner">
            ...
            </div>
        </div>
    </div>
</body>
</html>
+3
2

, , , :

CSS

* {
    margin: 0px;
    padding: 0px;
}
html, body {
    height: 100%;
}
#wrapper {
    position: relative;
    min-height: 100%;   
}
#header {
    border: 1px solid #e3e3e3;
    position: relative;
    top: 0px;
    left: 0px;
}
#footer {
    border: 1px solid #e3e3e3;
    position: relative;
    margin-top: -20px; /* negative value of footer height */
    height: 20px;
    clear:both;
}
#content {
    overflow: auto;
    padding-bottom: 20px;
    padding-left: 20px;
}

IE, <head> IE 6 8 .

<!--[if !IE 7]>
    <style type="text/css">
        #wrapper {display:table;height:100%}
    </style>
<![endif]-->

... Opera:

body:before {
   content:"";
   height:100%;
   float:left;
   width:0;
   margin-top:-32767px;
}

HTML

<div id="wrapper">
    <div id="header">header</div>
    <div id="content">
         <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>
<div id="footer">footer</div>

... jsFiddle . , , , jsFiddle a padding: 10px; iFrame, , .

" " :

, , , ?

...

, . , .

+1

. http://jsfiddle.net/SyHd9/4/

Cross Browser

<div class="for100procHeight">
    <div class="header">fixed top</div>
    <div class="content">long text with scrolling content</div>       
</div>
<div class="footer">fixed bottom</div>

html { height: 100%; }
body { min-height: 100%; height: 100%; }

.for100procHeight{
    position:relative;
    width:900px;
    height:100%;
    * html height:100%;
    background-color:#ccc;
}
.header{
    width:100%;
    height:100px;
    background-color:red;
    clear:both;
}
.content{
    width:100%;
    clear:both;
}
.footer{
    width:900px;
    height:100px;
    background-color:blue;
    clear:both;
}
p{
padding:10px;
}
+1

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

More articles:


All Articles