All geek questions in one place

CSS Creating Content DIV Auto Size After Content Inside

I'm currently trying to create a website template for me, the problem is that I cannot force the Content div to automatically expand the content that is in it.

I wanted it to automatically change, so I don't need to set CSS height manually.

CSS code I made:

#Container { position: relative; width: 800px; height: 100%; margin: 0px auto 0 auto; text-align: left; padding-left: 1px; cursor: de; border-left: 1px solid #000001; border-right: 1px solid #000001; border-top: 1px solid #000001; border-bottom: 1px solid #000001; background-color: #C1E9FF; } #LogoContainer { background-image: url('/media/Logo.png'); border-right-width: 1px; border-bottom-width: 1px; border-right-color: rgb(0,0,1); border-bottom-color: rgb(0,0,1); border-right-style: solid; border-bottom-style: solid; width: 400px; height: 50px; position: absolute; z-index: 1; } #LikeBar { border-bottom-width: 1px; border-bottom-color: rgb(0,0,1); border-bottom-style: solid; width: 400px; height: 50px; position: absolute; left: 400px; z-index: 1; } #ButtonHome { background-image: url('/media/Bt.png'); width: 100px; height: 30px; position: absolute; top: 50px; z-index: 1; } #ButtonVideo { background-image: url('/media/Bt.png'); width: 100px; height: 30px; position: absolute; left: 105; top: 50px; z-index: 1; } #Footer { border-top-width: 1px; border-top-color: rgb(0,0,1); border-top-style: solid; width: 800px; position: absolute; bottom: 0; z-index: 1; text-align: center; } #Content { position: absolute; top: 90px; width: 800px; height: 95%; border-top: 1px solid #000001; } #YouTubeBox { position: absolute; background-image: url('/media/Box.png'); width: 100px; height: 30; left: 10px; text-align: center; } #TwitterBox { position: absolute; background-image: url('/media/Box.png'); width: 100px; height: 30; left: 110px; text-align: center; } #FaceBookBox { position: absolute; background-image: url('/media/Box.png'); width: 100px; height: 30; left: 210px; text-align: center; } .DivT { line-height: 1px }

HTML Code with DIV

 <!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 name="generator" content= "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" /> <title>HTML CODE</title> <meta name="description" content="Null" /> <meta name="keywords" content="Null" /> <link href="ThemeV1.css" rel="stylesheet" type="text/css" /> </head> <body background="/media/Background.png"> <div id="Container"> <!-- Start Container --> <div id="LogoContainer"></div> <div id="LikeBar"></div><!-- Menu Controls --> <div id="ButtonHome"></div><!-- WEBSITE CONTENT --> <div id="Content"> <p class="DivT">We're upgrading the website with a new design and hopefully it will be faster, so check back later.</p> </div><!-- END WEBSITE CONTENT --> <!-- Footer --> <div id="Footer"></div><!-- End Footer --> </div><!-- End Container --> </body> </html>

So what's wrong? I want to save time so as not to set the height manually.

+4
source share
3 answers

Since your div#Content absolutely located inside the div#Container , the container will ignore the height and width of the content when determining its own dimensions. Try setting div#Content a position to relative . Then, as mentioned in the comments above, switch its height property to min-height . If you need to adhere to absolute positioning and still want the content-dependent height, you will need to use JavaScript to adjust the style.height containing div when the div content is resized.

+8
source

It looks like you set the height of your content height manually:

 #Content { ... height: 95%;

Delete the height and its height will be what you need to store your (non-floating) content.

+3
source

If you want something to change, then a div without a height attribute will automatically resize to the height of the content it contains. If you want it to be at least XXXpx high or fit the screen in a certain way, use the min-height attribute. This will fix the height so that it appears in the desired area if the text is too small and will expand if the text is larger than the minimum.

You have so many heights described here that I will not go into all of them, but I would adjust them at least:

 #Container { min-heigh: 100%;} #Content { min-height: 95%; }

* Note. Minimum height and minimum width are not supported by IE6;

Also positioning elements can cause a lot of problems with your height, because they can take an element out of the standard data stream, and this is not necessary if you have set up your layout correctly, if you do not need to do something specific, for example, set a z-index or want to fixed background that scrolls with the site.

0
source

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

More articles:


All Articles