3 and 2 Column Full Screen (Width & Height) Layouts (Css)

3 and 2 column full screen (width & height) layouts (CSS)

The examples you found in alistapart.com are as complicated as they need to be, and every serious example that you can find about those layouts supports padding. You will find (and already found) a lot of good examples about it in the internet, just spend some time trying to understand them and you will see that they are not so complicated, in the end.

Anyway, I have a good demo layout similar to the second you are looking for, here:
http://www.meiaweb.com/test/BMS_DM_NI/

Basically, the html is this:

<body>
        <div id="head">
            <h1>Title</h1>
        </div>
        <div id="main">
            <div id="navigation">

               <!-- navigation content -->

            </div>

            <div id="content">
                <h2>Content Title</h2>
                <p>
                   <!-- main content here -->
                </p>
            </div>
        </div>
    </body>

And the css is:

html {
    overflow: auto;
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    width: 100%;
    height: 100%;
    line-height: 1.5em;
}

#head {
    height: 20px;
    background-color: #666;
    color: #AAA;
    padding: 20px 20px;
}

#navigation {
    width: 210px;
    padding: 20px 20px;
    background: #efefef;
    border: none;
    border-right: solid 1px #AAA;
    float: left;
    overflow: auto;
}

#content {
    margin-left: 250px;
    padding: 20px 20px;
}

I think it's simple enough, and it works in all modern browsers.

3-column layout (fixed-fluid-fixed) with full-screen height

Is this what you need? http://jsfiddle.net/3MfBa/

HTML:

<div class="side left">
    Sub Content
  </div>
  <div class="main">
    Main Content<br>
    <img src="" width="200" height="600">
  </div>
  <div class="side right">
    Sub Content
  </div>

CSS:

.main {
    position: absolute;
    top:0;
    bottom:0;
    left:20%;
    right:20%;
    background:#ddd;
    padding: 10px;
    overflow: auto;
  }

  .side {
    position:absolute;
    width:20%;

    top:0;
    bottom:0;

    background-color: green;
  }

  .left {
    left:0;
    background-color: red;
  }

  .right {
    right:0;
    background-color: blue;
  }

Alternative CSS (http://jsfiddle.net/DgPRZ/):

body { margin:0; padding:0;}

.main {
    margin-left:20%;
    margin-right:20%;
    background:#ddd;
    padding: 10px;
  }

  .side {
    position:fixed;
    width:20%;

    top:0;
    bottom:0;

    background-color: green;
  }

  .left {
    left:0;
    background-color: red;
  }

  .right {
    right:0;
    background-color: blue;
  }

ALT VERSION 2 (http://jsfiddle.net/B4X4p/2/):

HTML:

<div class="container">
  <div class="col side left">
    Sub Content
  </div>
  <div class="col main">
      <div class="main-content">
        Main Content<br>
      </div>
  </div>
  <div class="col side right">
    Sub Content
  </div>
</div>

CSS:

html, body { margin:0; padding:0; height:100%;}

.container, .container > div.col {
    display: flex;
    flex: 1 0 auto;
}

.container {
    width:100%;
    min-height:100%;
}

.main {
    width: 60%;
    background:#ddd;
    float:left;
}

.main-content {
    padding: 10px;
}

  .side {
    width:20%;
    background-color: green;
    min-height:100%;
    float:left;
  }

  .left {
    background-color: red;
  }

  .right {
    background-color: blue;
  }

3 column grid layout, full screen

* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
    width: 100%;
}

.container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 2fr auto;
    grid-template-areas:
    "header header  header"
    "nav    article aside"
    "footer footer  footer";
    grid-column-gap: 8px;
    height: 100vh;
    width: 100%;
}

header, nav, footer, main, article, aside 
{
    display: block;
    width: 100%;
    height: 100%;
}

header {
    background-color: bisque;
    grid-area: header;
}

nav {
    grid-area: nav;
}

aside {
    grid-area: aside;
}

article {
    grid-area: article;
    background-color: aqua;
}

footer{
    background-color: beige;
    width: 100%;
    grid-area: footer;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/base.css" type="text/css" />
</head>

<body>
    <div class="container" role="main">
        <header>{header}</header>
        <nav>{navigation}</nav>
        <article>
            <main>{main content}</main>
        </article>
        <aside>{sidebar}</aside>
        <footer>{footer}</footer>
    </div>
</body>

</html>

HTML 2 column layout always full height

I created a Fiddle with your html and css minus the working map.

All i did was add height: 100vh to your .cell1 class like so:

.cell1 {
    display: table-cell;
    width: 49%;
    height: 100vh;
    margin-right: 1%;
    border: 1px solid #ccc;
    margin 12px;

}

This seems to give the effect you are looking for. If this is not the result you are trying to get please let me know. Play around with it and delete a bunch of text to see if you have 1 sentence in there it is still the full height of the browser.

EDIT*: If you want it to look like the picture you need to remove the border-spacing from the .table class and set the body to margin: 0; like this:

body {
    margin: 0;
}
.table {
    display: table;
}

I have updated the Fiddle to reflect these changes.
Hope this helps!

Bootstrap 3 two columns full height

Edit:
In Bootstrap 4, native classes can produce full-height columns (DEMO) because they changed their grid system to flexbox. (Read on for Bootstrap 3)

The native Bootstrap 3.0 classes don't support the layout that you describe, however, we can integrate some custom CSS which make use of css tables to achieve this.

Bootply demo / Codepen

Markup:

<header>Header</header>
<div class="container">
    <div class="row">
        <div class="col-md-3 no-float">Navigation</div>
        <div class="col-md-9 no-float">Content</div>
    </div>
</div>

(Relevant) CSS

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
  display: table-cell;
  float: none;
}

The above code will achieve full-height columns (due to the custom css-table properties which we added) and with ratio 1:3 (Navigation:Content) for medium screen widths and above - (due to bootstrap's default classes: col-md-3 and col-md-9)

NB:

1) In order not to mess up bootstrap's native column classes we add another class like no-float in the markup and only set display:table-cell and float:none on this class (as apposed to the column classes themselves).

2) If we only want to use the css-table code for a specific break-point (say medium screen widths and above) but for mobile screens we want to default back to the usual bootstrap behavior than we can wrap our custom CSS within a media query, say:

@media (min-width: 992px) {
  .row .no-float {
      display: table-cell;
      float: none;
  }
}

Codepen demo

Now, for smaller screens, the columns will behave like default bootstrap columns (each getting full width).

3) If the 1:3 ratio is necessary for all screen widths - then it's probably a better to remove bootstrap's col-md-* classes from the markup because that's not how they are meant to be used.

Codepen demo

Responsive fixed width 3 column layout with full width drawer in Desktop and Mobile

Here you're
I added this code at the end of the CSS

.body {
    position: relative;
}
.ESGDrawer {
    position: absolute;
    top: 247px;
    left: 0px;
    width: 100%;
}
.x{

    position: inherit;
}

and I add a new classname to each of your col-xs-12 col-md-4 divs

Check the working demo here

https://codepen.io/anon/pen/JaQPjN

3 and 2 Column Full Screen (Width & Height) Layouts (Css)