The basement when filling the block does not fall down, but stands still. How to solve it? And most importantly, why did this arise, what was the mistake?

*** { margin: 0; padding: 0; } html { height: 100%; } body { font: 12px/18px Arial, Tahoma, Verdana, sans-serif; height: 100%; } a { color: blue; outline: none; text-decoration: underline; } a:hover { text-decoration: none; } p { margin: 0 0 18px } img { border: none; } input { vertical-align: middle; } #wrapper { width: 100%; min-width: 1000px; min-height: 100%; height: auto !important; height: 100%; } /* Header -----------------------------------------------------------------------------*/ #header { position: relative; height: 74px; background: #000000 ; } #middle { width: 100%; padding:0 0 0 0px; height: 1%; position: relative; } #middle:after { content: '.'; display: block; clear: both; visibility: hidden; height: 0; } #container { width: 100%; float: left; overflow: hidden; } #content { padding: 20px 420px 50px 10px; } /* Sidebar Right -----------------------------------------------------------------------------*/ #sideRight { float: left; margin-right: -3px; width: 400px; margin-left: -400px; position: relative; } /* Footer -----------------------------------------------------------------------------*/ #footer { height:45px; width:100%; position:absolute; bottom:0; background: #CC0000; } /* блок ---------------------------------------------------------------------------*/ #rounded { border: 1px solid #000000; background-color: #FfF; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; padding:10px ; } #otstup { padding:50px } 
  <div id="wrapper"> <div id="header"></div><!-- #header--> <div id="middle"> <div id="container"> <div id="content"> <div id="otstup"> <div id="rounded"> <left><strong>Content:</strong> Lorem...<br>Sed... </left> </div> </div> </div><!--#rounded--> </div><!-- #container--> <div class="sidebar" id="sideRight"> <div id="otstup"> <div id="rounded">Integer...</div> </div> <div id="otstup"> <div id="rounded">Vestibulum...</div> </div> </div><!-- #middle--> </div><!-- #wrapper --> <div id="footer"> <center><strong>Footer:</strong> </center> </div><!-- #footer -->

  • Please give me a link to the site. - HoPkInS
  • He is local. - tukan
  • one
    You can put on DropBox. - VioLet
  • I tried to compile from the source Dropbox - it does not work. - tukan
  • one
    I meant this one -> dropbox.com - file storage. - VioLet

1 answer 1

When positioning as absolute bottom indicates the coordinate relative to the bottom of the visible area in the browser. And it depends only on the size of it, but somehow on the content.

To calculate the position of the block relative to the size and position of the parent block, position: relative must be used.

But, since the source code indicates the height of the information block (middle) at 1%, the position is calculated incorrectly and the block moves up. If you rely on the mathematical abilities of the browser and remove this embarrassing line, everything will be fine =)

  • Look at dl.dropbox.com/u/23843821/temp/index.html - tukan
  • one
    If it needs to be moved to the bottom, then remove position: absolute (so that there is a relative mode) and remove the incomprehensible height property from the middle block: 1%. (why?) The block will move to the bottom. - Alexey Sonkin