CSS Sidebar Height 100% -


I have been ringing my head against the wall for hours to understand the issue and it seems that it is something small Should be 'missing. I have searched online, but meeting me seems to work anything. HTML is: 

  & lt; Body & gt; & Lt; Div id = "header" & gt; & Lt; Div id = "bannerleft" & gt; & Lt; / Div & gt; & Lt; Div id = "bannricight" & gt; & Lt; Div id = "weblinks" & gt; & Lt; Span & gt; Web link: & lt; / Span & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; IMG src = "../../contents / images / myspace_32x32.png" alt = "MySpace" /> & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; IMG src = "../../content / picture / facebook_32x32.png" alt = "facebook" /> & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; Img src = "../../content / image / youtube_32x32.png" alt = "youtube" /> gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "sidebar" & gt; & Lt; Div id = "sidebarbottom" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "navigation container" & gt; & Lt; Ul id = "navigation" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; New & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; New & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; New & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; New & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; New & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; New & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Div id = "main" & gt; & Lt ;! - content - & gt; & Lt; / Div & gt; & Lt; / Body & gt;

My complete CSS is: 

  * {margin: 0 pixels; Padding: 0 pixels; } Body {font-family: calibri, sans-serif; Height: 100%; } # Headers {Width: 100%; Z-index: 1; Height: 340px; Background image: URL ("../../content / image / banner center.gif"); Double-repeat: repeat-x; } #header #bannerleft {float: left; Background-image: url ("../../content/images/bannerbaby.gif"); Repeat Background: No Repetition; Height: 340px; Width: 43 9px; Z-index: 2; } #Benrrite {float: right; Background-image: url ("../../content/Picture/BannerRightGif"); Repeat Background: No Repetition; Width: 382px; Height: 340px; Background color: white; Z-index: 2; } #Sidebar {width: 180px; Background: URL ("../../content / images / sidebar page") Repeated-; Z-index: 2; Height: 100%; Status: Completed; } #SidebarBottom {margin-left: 33px; Height: 100%; Background: URL ("../../content / images / sidebar image page") No repeat; } #Navigation Container {Status: Completed; Top: 350px; Width: 100%; Background color: #BBC4C3; Height: 29px; Z-index: 1; Left: 0 pixels; } # Innovation {margin-left: 190 px; Font-family: calibri, sans-serif; } #navigation li {float: left; List style: none; Padding-right: 3%; Padding-top: 6px; Font-size: 100%; } #Navigation A: Link, A: Active, A: Visited {color: # 012235; Text-decoration: None; Font-weight: 500; } #Navigation A: Hover {Color: White; } #WebLinks {float: right; Color: # 00324b; Margin-top: 50px; Width: 375px; } #WebLinks Span {float: left; Margin-right: 7px; Margin-left: 21px; Font size: 10pt; Margin-top: 8px; Font-family: helvetica; } #WebLinks ul li {float: left; Padding-right: 7px; List style: none; } #WebLinks ul li {text-decoration: none; Font size: 8pt; Color: # 00324b; Font weight: normal; } #WebLinks ul li img {border-style: none; } #WebLinks: li a: hover {color: # bcc5c4; }

I want the sidebar to spread in height with the content of my page and always leave the image below the sidebar under the sidebar.

update: as both answers are still up and down Votes are received, and when writing, eight years is outdated: perhaps there are better techniques now. The original answer is as follows.

Obviously you are looking for this technique: -)

How the height-property is calculated, you can not set the height : 100% inside the thing which is auto-height


Comments

Post a Comment

Popular posts from this blog

python - Overriding the save method in Django ModelForm -

I'm having trouble overriding a ModelForm save method. I get this error I'm: Exception type: TypeErier Exception Value: Save () found an unexpected keyword argument 'committed' My intentions include a form 3 fields Submit several values ​​for, then create an object for each combination of those areas, and to save each object file models.py class collarsult type (models.Model): id = model. AutoField (db_column = 'icontact_result_code_type_id', primary_key = true) callResult = models.ForeignKey ( 'CallResult', db_column = 'icontact_result_code_id') campaign = models.ForeignKey ( 'campaign', db_column = 'icampaign_id') CALLTYPE = models.ForeignKey ( 'CALLTYPE', db_column = 'icall_type_id') agent = models.BooleanField (db_column = 'bagent', default = true) teamLeader = models.BooleanField (db_column = 'bTeamLeader', default = true) active = models.BooleanField (db_column = Django.form...
Read more

html - CSS autoheight, but fit content to height of div -

I have a div in which there are three children- div in the left and middle div: float: left while true: float: true because it is my layout Actually will spoil, I've used ClearFix Hack: .cf {zoom: 1; }. Cf: First,. Cf: {content: ""; Display: Table; }. Cf: After {clear: both; } It still works, but I want to be the right div an indicator. So it should fill 100% of the parent unit of height. How can I complete this? PS is the full code: & Lt; / Div & gt; & Lt; Div class = "mobile_content" & gt; & Lt; H5 & gt; {{Data.titel}} & lt; / H5> & Lt; Table & gt; & Lt; TR & gt; & Lt; Th & gt; Komponist: & lt; / Th & gt; & Lt; TD & gt; {{Data.komponist}} & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; Th & gt; Instrument: & lt; / Th & gt; & Lt; TD & gt; {{Data.instrumente}} & lt; / TD & gt; & Lt; / TR & gt;...
Read more

qt - How to prevent QAudioInput from automatically boosting the master volume to 100%? -

I have been trying to use Qt5 multimedia to record audio with QAudioInput, however, when I see If QAudioInput is started, it increases the master volume of my sound device to 100%. How can I prevent QAudioInput from changing the master volume? My current development platform is Linux with PalsAdio (with flat audio disabled). How can I use QAudioInput : QAudioDeviceInfo device_info = QAudioDeviceInfo :: defaultInputDevice (); QAudio format format; Format.setSampleRate (44100); Format.setChannelCount (1); Format.setSampleSize (16); Format.setCodec ("Audio / PCM"); Format.setSampleType (QAudioFormat :: SignedInt); Format.setByteOrder (QAudioFormat :: LittleEndian); Std :: cout & lt; & Lt; Device_info.deviceName (). ToUtf8 (). ConstData () & lt; & Lt; Std :: endl; QAudioInput * default_device = new QAudioInput (device_info, format); QIODevice * default_io_device = default_device-> Start (); a QAudioInput.setVolume () method is not you I ...
Read more