CODEWITHSUNDEEP
htmlcss
Black
Black

Reputation: 5367

css for liquid layout - height depends on one column's content

I am building a new page using a liquid layout, and the screen.css recommended here:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
    <link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
</head>
<body>

<div id="header">
    Header
</div>
<div class="colmask leftmenu">
    <div class="colleft">
        <div class="col1">
            col 1
        </div>
        <div class="col2">
            col 2
        </div>
    </div>
</div>
<div id="footer">
    Footer
</div>

</body>
</html>

CSS:

<style media="screen" type="text/css">
/* <!-- */
html,body {
    height:100%;
}

body {
    margin:0;
    padding:0;
    border:0;           /* This removes the border around the viewport in old versions of IE */
    width:100%;
    background:#fff;
    min-width:600px;        /* Minimum width of layout - remove line if not required */
                    /* The min-width property does not work in old versions of Internet Explorer */
    font-size:90%;
}
a {
    color:#369;
}
a:hover {
    color:#fff;
    background:#369;
    text-decoration:none;
}
h1, h2, h3 {
    margin:.8em 0 .2em 0;
    padding:0;
}
p {
    margin:.4em 0 .8em 0;
    padding:0;
}
img {
    margin:10px 0 5px;
}


/* Header styles */
#header {
    clear:both;
    float:left;
    width:100%;
}
#header {
    border-bottom:1px solid #000;
}
#header p,
#header h1,

/* 'widths' sub menu */
#layoutdims {
    clear:both;
    background:#eee;
    border-top:4px solid #000;
    margin:0;
    padding:6px 15px !important;
    text-align:right;
}
/* column container */
.colmask {
    position:relative;  /* This fixes the IE7 overflow hidden bug */
    clear:both;
    float:left;
    width:100%;         /* width of whole page */
    overflow:hidden;        /* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
    float:left;
    width:100%;
    position:relative;
}
.col1,
.col2,
.col3 {
    float:left;
    position:relative;
    padding:0 0 1em 0;
    overflow:hidden;
}
/* 2 Column (left menu) settings */
.leftmenu {
    background:#fff;        /* right column background colour */
}
.leftmenu .colleft {
    right:75%;          /* right column width */
    background:#f4f4f4; /* left column background colour */
}
.leftmenu .col1 {
    width:71%;          /* right column content width */
    left:102%;          /* 100% plus left column left padding */
}
.leftmenu .col2 {
    width:21%;          /* left column content width (column width minus left and right padding) */
    left:6%;            /* (right column left and right padding) plus (left column left padding) */
}
/* Footer styles */
#footer {
    clear:both;
    float:left;
    width:100%;
    border-top:1px solid #000;
}
#footer p {
    padding:10px;
    margin:0;
}
/* --> */
</style>

This is almost working as needed, except that I'm trying to have the height of the layout depend on Col 1 - that is to say:

a) when there's not much content in Col1, the layout should take up the whole height of the browser window

b) when there's more content in Col1 than fits in the height of the browser window, the whole browser window (not just Col1) gets a vertical scroll bar

I've tried setting: 

html,body {
height:100%;
}

but it's not working as described. I would have thought that this is a fairly common scenario, but it's very difficult to sort the 'good' advice from the 'bad/outdated' when trying to learn CSS/layouts

Upvotes: 1

Views: 322

Answers (1)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

You can do this with a flex box:

body {
  display: flex;          /* make the body a flex box */
  flex-direction: column; /* children go down the screen */
}

.leftmenu {
  flex: 1;                /* resize to fill the space */
  overflow: auto;         /* overflow as needed */
}

In this Fiddle, resize the window to see scrollbars appear as needed:

http://jsfiddle.net/qrf29pop/

Upvotes: 1

Related Questions