All geek questions in one place

3-line layout, expandable medium, minimum height: 100%, so the footer is at the bottom when the minimum content

How would I change this so that the middle div expands vertically to fill the gap?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">

body,td,th {
    font-family: Tahoma, Geneva, Verdana, sans-serif;
}

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
}

#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:100%;

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

#header {
    height: 150px;
    border-bottom: 2px solid #ff8800;
    position: relative;
    background-color: #c97c3e;
}

#middle {
    padding-right: 90px;
    padding-left: 90px;
    padding-top: 35px;
    padding-bottom: 43px;
    background-color: #0F9;
}
#footer {
    border-top: 2px solid #ff8800;
    background-color: #ffd376;
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
}
</style>
</head>

<body>

<div id="container">
    <div id="header">
        Header
    </div>
    <div id="middle">
        Middle
    </div>
    <div id="footer">
        Footer
    </div>
</div>

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

You cannot get the actual div for the extension to fill in the gap without Javascript, but you can easily make it look like this. Moving the background color of the rule: # 0F9; from #middle to #container. This will give you the required behavior (it will fill the gap when there will be minimal content, and when there will be a lot of content, it will expand down by clicking the footer with it).

If you need a Javascript solution, the following code will work. Just specify this in the HTML header section:

<script type="text/javascript">
window.onload = function() {
    var mid = document.getElementById('middle');
    var foot = document.getElementById('footer');
    mid.style.height = ((foot.offsetTop+foot.clientHeight)-(mid.offsetTop+mid.clientHeight))+'px';
};
</script>
0

:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">

body,td,th {
    font-family: Tahoma, Geneva, Verdana, sans-serif;
}

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
}

#container {
    height: 100%;
}

#container #header {
    height: 50px;
    background-color:#0F6;
}

#container #middle {
    background-color: #66F;
}

#container #footer {
    height: 20px;
    background-color: #FF3;
}

</style>
</head>

<body>

<!-- Apology note to perfectionists: I'm sorry for using tables, but see this:
    http://stackoverflow.com/questions/1703455/three-row-table-less-css-layout-with-middle-row-that-fills-remaining-space
    A layout done with this table would be impossible with CSS. -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="container">
  <tr id="header">
    <td>h</td>
  </tr>
  <tr id="middle">
    <td>m</td>
  </tr>
  <tr id="footer">
    <td>f</td>
  </tr>
</table>


</body>
</html>
0
#footer {
    clear: both;
}

. .

CSS clear breaks

.clear {clear:both;}

:

<div id="container">
    <div id="header">
        Header
    </div>
    <div id="middle">
        Middle
    </div>

    <br class="clear" />

    <div id="footer">
        Footer
    </div>
</div>

, .

0

, , , .

, . , , - , .

, .

0

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

More articles:


All Articles