• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 747
  • Last Modified:

Autoexpanding CSS Cols to fit screen

Back in the day it was easy to create a layout with tables that autostretched depending upon screen size.  WIth CSS it seems a bit more tricky.

I have attached a HTML file with CSS as an example of what I am trying to do.  I need the file to stretch out the 3 divs 100% of user screen size.  However, the header and right col hav specified px values that have to stay.  I also do not want scroll bars to appear on the page like you used to be able to do with Tables.

How do I autostretch the left nav link layer to 100% of the remaining page height?  How do I stretch the content layer to 100% of remainign page hieght and width?  Will this code work in all standard CSS supporting browsers and screen sizes?
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html {
	height: 100%;
	margin: 0px;
	padding: 0px;
body {
	height: 100%;
	margin: 0px;
	padding: 0px;
#Header {
	width: 100%;
	height: 100px;
	background-color: #006633;
	color: #FFFFFF;
#SideLinks {
	width: 150px;
	height: 400px;
	color: #FFFFFF;
	float: left;
#Content {
	width: 400px;
	height: 400px;
	margin: 10px;
	padding: 2px;
	border: solid 2px #333333;
	float: right;
<div id="Header">Header Height: 100px Width: 100% </div>
<div id="SideLinks">
  <p>Width: 150px</p>
  <p>Height: ?? How do I set the height so it automatically fills 90% or 100% or whatever the rest of the height is to touch the bottom of the screen without scrolling??? </p>
<div id="Content">
  <p>Width: ??? How do I set the width so that this box stretches accross what is left of the screen? It has margins and borders.</p>
  <p>Height: ??? Same question. Want it to fill the space that is remaining hith.  </p>

Open in new window

1 Solution
David S.Commented:
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now