Full Height Sidebar and Full Height Content, Fluid Layout

Full height sidebar and full height content, fluid layout

I've updated your code. Check out it on Plunker.

At first try to not use absolute or relative positions, if there is no need of them.

The second, in your case by giving display: inline and float: left styles, do the same thing, so there is enough to use only the latter one.

Besides, I've set the height of HTML and BODY tags to be 100% and did the same for sidebar and content DIVs, so they will fill the parent's (body) height.

And finally, one of your problems was the repeat-y value of background property. It didn't repeat on x axis, so you didn't see the actual size of the DIVs. I've just set it to repeat instead of repeat-y.

Full height layout with Header, footer, sidebar and content divided into 4 equal boxes

A found the solution. Here it is:

html {
  height: 100%;
}

body {
  height: 100%;
  position: relative;
  color: white;
  font-family: Arial, sans-serif;
}

body * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#wrapper {
  height: 100%;
  padding: 60px 0;
  position: relative;
}

#header {
  width: 100%;
  height: 60px;
  background: #171717;
  position: absolute;
  top: 0;
  left: 0;
}

#content {
  height: 100%;
  display: flex;
}

#left {
  background: green;
  width: 200px;
  flex: 0 0 200px;
}

#right {
  background: blue;
  width: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.red_box {
  flex: 0 0 50%;
  background: red;
  border: 1px solid #111;
  border-bottom: none;
  text-align: center;
}

#footer {
  width: 100%;
  height: 60px;
  background: #171717;
  bottom: 0;
  left: 0;
}

@media (max-width: 768px) {
  .red_box {
    flex: 0 0 100%;
  }
}

<div id="wrapper">
  <div id="header">Header</div>
  <div id="content">
    <div id="left"></div>
    <div id="right">
      <div class="red_box">1</div>
      <div class="red_box">2</div>
      <div class="red_box">3</div>
      <div class="red_box">4</div>
    </div>
  </div>
  <div id="footer">Footer</div>
</div>

CSS full height sidebar, content responsive

I'd do something like this (just solving the sidebar for you). First of all, your CSS and HTML need to match. Your HTML has sidebar as an ID, and your CSS has it as a class.

One issue I'm seeing is that there are explicit widths set on your content-- if you're going to utilize this page layout (and correct me if I'm wrong) your #content block should be 100% of your page width apart from the sidebar. If that's the case, then I would add in this CSS:

body {
    overflow: hidden;
}
#content {
    width: auto !important;
    height: 100%;
    overflow: auto;
}

That takes away the overflow from the entire body and restores it into the #content area, providing for a scrollable area and a simulated fixed left sidebar. You can check this out here: http://jsfiddle.net/zve96/1/

Another method would be similar, but utilizing absolute positioning. The CSS would look something like:

html, body {
    height: 100%;
    overflow: hidden;
    position: relative;
}
#nav {
    background: #777;
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
    width: 150px;
}
#topbar {
    background: #333;
    height: 40px;
    left: 150px;
    position: absolute;
    right: 0;
    top: 0;
}
#content {
    bottom: 0;
    left: 150px;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 40px;
}

And you can check this one out here: http://jsfiddle.net/7Sk7j/

HTML/CSS full height sidebar

You're looking for the infamous "faux-columns" technique. Here's a tutorial.

Basically, you can't do it with a simple background color, you have to use a repeating background image.

Full-height fluid Layout with editable Textfield

You may not like the answer, but the only way I know to meet all your criteria is by using a table for layout.

HTML

<table class="layout">
  <tr class="header">
    <td>Header goes here

  <tr>
    <td>
      <div class="container">
        <div class="content">
          Content goes here.
        </div>
      </div>

  <tr class="footer">
    <td>Footer goes here
</table>

CSS

The table takes up the entire viewport:

.layout {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}

Because the table has 100% height, it will stretch all rows as needed to meet the height. This style prevents it from stretching the header and footer rows:

.header, .footer {
  height: 0px;
}

This style is needed for Firefox only:

tr {
  height: 100%;
}

In all browsers except IE, this style works on the td. I've put it in a div so it will work with IE:

.container {
  position: relative;
  height: 100%;
}

Now that we have a container with relative positioning, we can apply absolute positioning with 100% height and overflow on its content:

.content {
  overflow: auto;
  position: absolute;
  height: 100%;
}

Tested in IE11, Chrome, Firefox, Opera, and Safari.

Fiddle

How to make a sidebar with full height in Bootstrap 4 using flex?

Better late then never i guess.

Do you have anything above or below the div you want to be full height?

If you for example got a navbar at the top with a height of 50px you should do 100vh minus the 50 px.

For example:

min-height: calc(100vh - 50px);

That will make the div 100% height minus the 50px from the Navbar ( which will remove any "hidden content" aka scrollbar )

Bootstrap fluid-layout and full height div

Here is a go at your issue using primarily jQuery.

http://jsfiddle.net/uyEuN/4/

JavaScript

function resolveFullHeight() {
    $("#fullHeight").css("height", "auto");

    var h_window = $(window).height(),
        h_document = $(document).height(),
        fullHeight_top = $("#fullHeight").position().top,
        est_footerHeight = 112;

    var h_fullHeight = (-1 * (est_footerHeight + (fullHeight_top - h_document)));

    $("#fullHeight").height(h_fullHeight);
}

resolveFullHeight();

$(window).resize(function () {
    resolveFullHeight();
});

I have left the HTML alone for the most part, except for adding this div beneath the navbar.

<div class="spacer-fluid-60"></div>

The CSS includes new rules for setting the height of the .spacer-fluid-60 div,
and I also removed the padding-top rule for the body element. Investigate the jsfiddle for complete details.

In the HTML, I have added a number of duplicate filler paragraphs, and have left the majority of them commented out. Un-comment them out as necessary to play around with variations of the content height in the #fullHeight element and see if it still behaves as you intend it to. The minimal testing I have done so far suggests this will work.

Note: add some throttling to reduce the number of times the function gets called while scrolling.

---

Related Topics