Geek Answers Handbook

Creating a “sandwich” “sandwich” with fixed slices of slices of bread with a fixed height and expandable meat div

So, I have a sandwich div: three divs on top of each other. Slices of bread have a fixed height due to background images. Meat - 1px vertical repeater image. I need a way to expand the meat when the contents of the overflow from the top bread fall into the bottom of the bread. I thought that meat and lower bread would need a wrapper, but I'm not sure how to implement it.

Here is what I still have.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> #top { position:relative; height:100px; background-color:pink; width:460px; word-wrap:break-word; } #wrapper { position:relative; } #expand { min-height:100%; height:auto; background-color:#EEEFFF; } #bottom { height:100px; background-color:#EEEEEE; } div.clear{ position:absolute; width:100%; clear:both; height:1px; overflow:hidden; border:solid orange; } </style> <title></title> </head> <body> <div id="top"> a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a </div> <div id="wrapper"> <div id="expand"></div> <div id="bottom"></div> <div class="clear"></div> </div> </body> </html>

I need the top content to get “clear” in the bottom wrapper and move the wrapper down.

+7
html css
source share
4 answers

This effect you after?

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> #top { position:absolute; height:100px; background-color:pink; width:460px; top:0px; } #wrapper { position:relative; } #expand { position:absolute; top:100px; /*height of top div*/ bottom:100px; /*height of bottom div*/ width:100%; background-color:#cccFFF; } #bottom { position:absolute; bottom:0px; height:100px; width:560px; background-color:#EEEEEE; } #text { position:relative; } </style> <title></title> </head> <body> <div id="wrapper"> <div id="expand"></div> <div id="top"></div> <div id="bottom"></div> <div id="text"> a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a </div> </div> </body> </html>
+7
source share

I think that when you have content overflowing a fixed height element, overflowing content does not affect the layout of other elements.

Could you move your content from the top piece of bread and into the meat? This will lead to expansion.

If the content should appear in front of the top background to cut the bread, you can use position: relative and a negative bottom margin to achieve this:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> #breadtop, #breadbottom { height: 100px; background-color: #977; } #breadtop { overflow: visible; } #meat { background-color: #fbd; } #content { position: relative; top: -100px; margin-bottom: -100px; } </style> <title></title> </head> <body> <div id="breadtop"></div> <div id="meat"> <div id="content"> a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/> a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/> a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a </div> </div> <div id="breadbottom"></div> </body> </html>

I like this question because it is rather complicated and because it contains the phrase “extensible meat div”.

+1
source share

(If you need some sample code, I can come up with it, but it will take me more time to answer)

What you might want is to place your 3 slices in a div and put your “top” content in a new div instead of the top fragment. This way your new div height will be determined by the content.

For three slices, the absolute position of all of them. Place the top and bottom slices above and below your new div using top:0 and bottom:0 , respectively. For a mid-cut meat, don't give it a height, but instead make the top and bottom declarations equal to the height of your top and bottom slices. Thus, the top / bottom of the meat will always be held in X pixels from the top / bottom of your new div, where X is the top / bottom height of the cut.

+1
source share

I always follow this example: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

0
source share

More articles:


All Articles