html - Expand <div> tag to bottom of page with CSS -


I know that this question is called a lot because I called it "many of the trying to work for me" I have seen the solutions I can get it to work if I hack html but I want to use all CSS. I want it to have a header with two columns, and I want to fill these three items for the whole page / screen, and I want to do it with CSS and without frames or tables. It looks like how I want to see my page, but again, I do not want to use frames. I can not get two colored colored columns to extend to the bottom of the screen. I have this, it seems that the right column spans the lower part of the screen, just changing the color of the body color in the same color as the left-hand column, but I would like to extend both the columns down to me I did not even have to do so far:

HTML

   & Lt; Link href = "stylesheet.css" rel = "stylesheet" type = "text / css" /> & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "container" & gt; & Lt; Div id = "masthead" & gt; My site & lt; / Div & gt; & Lt; Div id = "left_col" & gt; Employee management & lt; Br / & gt; & Lt; A href = "employee% 20 management.php" & gt; Add new employees & lt; / A & gt; & Lt; Br / & gt; & Lt; A href = "employee% 20 management.php" & gt; Edit existing employee & lt; / A & gt; & Lt; Br / & gt; & Lt; Br / & gt; Load management & lt; Br / & gt; & Lt; A href = "load% 20 management.fp" & gt; Load new & lt; / A & gt; & Lt; Br / & gt; & Lt; A href = "load% 20 management.fp" & gt; Edit existing load & lt; / A & gt; & Lt; Br / & gt; & Lt; Br / & gt; Report Management & lt; Br / & gt; & Lt; A href = "Report% 20Management.php" & gt; Staff Report & lt; / A & gt; & Lt; Br / & gt; & Lt; A href = "Report% 20Management.php" & gt; Load Report & lt; / A & gt; & Lt; / Div & gt; & Lt; Div id = "page_content" & gt; & Lt; Div id = "page_content_heading" & gt; welcome! & Lt; / Div & gt; Too many words & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

CSS

#Masthead {Background color: #FFFFFF; Font-family: Arial, Helvetica, sans-serif; Font-size: xx-large; font-weight: bold; Padding: 30px; Text-align: center; } # Containers {min-width: 600px; Minimum height: 100%; #left_col {padding: 10px; Background color: # 339933; Swim left; Font-family: aerial, helvetica, sense-serif; Font-size: big; font-weight: bold; Width: 210px; } #page_content {background-color: #CCCCCC; Margin-left: 230px; Padding: 20px; } #page_content_heading {font-family: ariel, helvetica, sans-serif; Font-size: large; font-weight: bold; Padding-bottom: 10px; Cushion Top: 10px; } A {color: # 0000FF; Font-family: Arial, Helvetica, sans-serif; Font-size: medium; Font-weight: normal; } A: Hover {Color: # FF0000; } Html, body {height: 100%; Padding: 0; Margin: 0; Background color: #CCCCCC; }

something that should be done

  Lt; Div id = "header" style = "position: absolute; top: 0px; left: 0px; height: 100px; width: 100%; overflow: hidden; background color: # 00FF00" & gt; & Lt; / Div & gt; & Lt; Div id = "leftnav" style = "position: absolute; top: 100px; left: 0 px; width: 100px; bottom: 0 pixel; overflow: automatic; background color: # 0000ff" & gt; & Lt; / Div & gt; & Lt; Div id = "content" style = "position: full; top: 100px; left: 100px; bottom: 0px; correct: 0px; overflow: automatic; background color: #ff 20000" & gt; & Lt; / Div & gt;  

Comments

Popular posts from this blog

windows - Heroku throws SQLITE3 Read only exception -

lex - Building a lexical Analyzer in Java -

python - rename keys in a dictionary -