I am currently writing on an Angular application that has a top fixed bootstrap navbar and a sidebar container that consists of a sidebar header and a scrollable sidebar list that displays some content.
Therefor I use the following CSS classes:
.main-wrapper {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
padding-top: 50px;
}
.sidebar-container {
height: 100%;
position: fixed;
padding: 0px;
margin-top: -50px;
padding-top: 50px;
border-right: 1px solid #ddd;
}
.sidebar-header {
position: relative;
padding: 15px;
border-bottom: 1px solid #ddd;
}
.sidebar {
height: 100%;
position: relative;
overflow-y: scroll;
}
And the following html code:
<div class="main-wrapper">
<div class="sidebar-container col-xs-3">
<div class="sidebar-header">
...
</div>
<div class="sidebar">
...
</div>
</div>
<div class="main-view col-xs-9 pull-right">
...
</div>
</div>
The following jsfiddle is a minimal working example:
https://jsfiddle.net/j1tuw3vj/8/
My problem is, that the sidebar is moved beyond the bottom of the page so the last element of the list is invisible. I cannot move it up by setting a negative margin and a padding to the sidebar, because I don't know the actual height of the sidebar header (its height can change in different views).
Replace:
/* Scrollable sidebar. */
.sidebar {
height: 100%;
position: relative;
overflow-y: scroll;
}
With:
/* Scrollable sidebar. */
.sidebar {
height: 85%;
position: relative;
overflow-y: scroll;
}
The problem is:
You adjusted the sidebar height to 100% and the position is relative.
See it Live.
UPDATE:
add this line to your css file.
.nav-pills li:last-child{
margin-bottom:80px;
}
See Update Here.
Related
So I have a left nav that can pop in and out. I put a little example without the popping in and out here: http://jsfiddle.net/crz4w89o/
But as you can see giving the left nav height:100% adds more room below the window and you can scroll down. But how do I make it so the height of the left nav just fills the window without adding more space?
HTML:
<div class="all">
<div class="header">header</div>
<div class="leftnav-container">
<! -- will be animated to pop in and out -->
<div class="flyout">
left nav content
</div>
</div>
</div>
CSS:
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.all {
height: 100%;
}
.header {
border-bottom: 1px solid black;
height:40px;
}
.leftnav-container {
height: 100%;
position: relative;
}
.flyout {
position: absolute;
top: 0;
background-color: lightblue;
width: 270px;
height: 100%;
transition: 0.4s;
overflow: scroll;
padding: 10px;
}
expected would be the content not overflowing outside the window. Maybe there is a better way to write this then using or relying on height 100%
You can make use of CSS calc() property to deduct a pixel amount from the height (vh units) of your nav container:
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
.all {
height: 100%;
}
.header {
border-bottom: 1px solid black;
height:40px;
}
.leftnav-container {
height: calc(100vh - 61px);
position: relative;
}
.flyout {
position: absolute;
top: 0;
background-color: lightblue;
width: 270px;
height: 100%;
transition: 0.4s;
overflow: scroll;
padding: 10px;
}
<div class="all">
<div class="header">header</div>
<div class="leftnav-container">
<! -- will be animated to pop in and out -->
<div class="flyout">
left nav content
</div>
</div>
</div>
Breakdown of the changes made:
In .leftnav-container - we have set the height as calc(100vh - 61px)
100vh refers to '100% of the viewport height'
The 61px we deduct from this value is made up of:
.header border width and height (41px)
.flyout padding-top and padding-bottom values (20px)
I have the following layout which is a alteration of the AdminLTE boxed layout template:
HTML
<div class="wrapper">
<div class="header">
Header
</div>
<div class="leftbar">
Left bar
</div>
<div class="content-wrapper">
<div class="content">
Content
</div>
<div class="content-rightbar">
Right bar
</div>
</div>
<div class="footer">
Footer
</div>
</div>
CSS
body {
background-color: lightgray;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: auto;
}
.wrapper {
overflow: hidden;
background-color: #222d32;
max-width: 600px;
margin: 0 auto;
min-height: 100%;
position: relative;
height: 100%;
}
.header {
position: relative;
height: 30px;
z-index: 1030;
color: white;
background-color: #367fa9;
padding: 2px;
}
.leftbar {
color: white;
background-color: #222d32;
position: absolute;
top: 0;
left: 0;
padding-top: 30px;
min-height: 100%;
width: 100px;
z-index: 810;
padding: 40px 10px 10px 10px;
}
.content-wrapper {
margin-right: 100px;
margin-left: 100px;
background-color: #ecf0f5;
z-index: 800;
}
.content {
min-height: 200px;
padding: 10px;
margin-right: auto;
margin-left: auto;
}
.content-rightbar {
right: 0;
min-height: calc(100% - 30px);
position: absolute;
background: #f9fafc;
border-left: 1px solid #d2d6de;
z-index: 1010;
top: 0;
width: 100px;
text-align: right;
padding: 40px 10px 0 10px;
}
.footer {
background: #fff;
border-top: 1px solid #d2d6de;
margin-left: 100px;
z-index: 9999;
height: 30px;
padding: 2px;
}
Codepen
https://codepen.io/kspearrin/pen/QqBrpB
Result
Problems
This looks precisely how I would like it to with one problem:
Overflowing the leftbar and content-rightbar with content causes the overflowed content to be hidden. Height is only determined by the content inside content.
Examples:
Question
How can I make it so that the either the entire layout's height within the body increases with the content of the content, leftbar, and content-rightbar - OR - that the leftbar and content-rightbar scroll with their overflowing content?
You have set your overflow to hidden for your wrapper, you can just set it to "auto" or "scroll" to show the content inside your container. Only then it will take it will be longer then your content container and then it will take in the whole width because there are no other elements right there.
I would in fact recommend you to reconsider using flex box as it will keep your elements at the same height and will prevent all the overflow issues you have right now.
If you are unfamiliar with flex boxes I can recommend you https://css-tricks.com/snippets/css/a-guide-to-flexbox/ at the end you will find an example for a multi column layout which includes all the elements you need for your project.
Also another tip: You could use an unordered list for your sidebar items, as this is the most common way to do it.
ul {list-style: none;}
<ul>
<li>Left bar</li>
<li>Left bar</li>
<li>Left bar</li>
</ul>
I am struggling with the bottom part of the overflowing content as can be seen in the fiddle. How would you go about fixing this, while keeping this layout?
http://jsfiddle.net/Sa6cb/392/
CSS:
.wrapper {
overflow-y: hidden;
overflow-x: hidden;
border: 1px solid #000;
height: 200px;
width: 200px;
}
.wrappedheader {
position: static;
border-bottom: 1px solid #000;
padding: 15px;
}
.wrappedbody {
position: relative;
overflow-y: auto;
height: 100%;
padding: 15px;
}
HTML:
<div class="wrapper">
<div class="wrappedheader">
This is a header
</div>
<div class="wrappedbody">
<!-- Content causing overflow-y -->
</div>
</div>
Your wrappedbody has height 100%, which is 100% of its parent, wrapper. However, wrapper has two children, wrappedbody and wrappedheader. The height of wrappedbody should be the height of wrapper minus the height of wrappedheader:
.wrappedbody {
position: relative;
overflow-y: auto;
height: calc(100% - 79px); /* 79 = wrappedheader height + wrappedbody padding*/
padding: 15px;
}
http://jsfiddle.net/feihcsim/14auqpqd/
I want a page with sticky footer which's scrollbar does not overlap header, only body. Like I do in this fiddle. But now i want that content (dotted box) has 100% height of body.
html
<div class="navbar navbar-inverse navbar-fixed-top"></div>
<div class="container">
<div class="content-container">
<div class="my_content">Full height ??</div>
<div class="push"></div>
</div>
<div class="footer"></div>
</div>
css
html,
body {
height: 100%;
overflow: hidden;
}
body {
padding-top: 50px;
}
.container {
overflow-y: auto;
overflow-x: hidden;
height: 100%;
}
.content-container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
position: relative;
padding-top: 15px;
padding-bottom: 15px;
min-height: 100%;
margin-bottom: -60px;
}
.footer {
position: relative;
width: 100%;
background-color: red;
}
.footer,
.push {
height: 60px;
}
.my_content {
border: 1px dotted;
width: 100%;
height: 100%;
min-height: 200px;
min-width: 300px;
}
You can suggest any other template for using sticky footer.
You can set .my_content to 100% of the viewport height minus the height and (vertical) padding of the other elements (i.e. header height, footer height, top and bottom padding on .content-container) on your page like so:
.my_content {
min-height: calc(100vh - 140px);
}
DEMO
If your header and footer have variable heights, this won't work though.
use this example for sticky footer it does not overlap header
http://jsfiddle.net/0dbg9ko2/12/
.footer {
position: fixed;
bottom:0;
left:0;
background-color: red;
}
and i can some changes in html
I have three DIVs, one is the header at the top which should be fixed (should not scroll), width 100%, height 50px; another is a sidebar to the left which needs to be 100% of browser's height, fixed width of 200px and another DIV for the main content to the right which will be fluid in width, that is 100% of the remaining width (total minus 200px).
Content in the main content DIV should scroll vertical as content grows, but the sidebar to the left and header DIV should remain as it is. YouTube's home page is the perfect example what I want to achieve. I tried all position types and widths, but no success. HTML is like this:
<div id="header"></div>
<div id="parent">
<div id="sidebar"></div>
<div id="main-content"></div>
</div>
Edit:
Basic CSS code I am trying is:
#header {
position: fixed;
width: 100%;
height: 50px;
}
#sidebar {
position: fixed;
width: 220px;
height: 100%;
}
#main-content {
position: relative;
left: 220px;
width: 100%;
height: 300px; /*This could be anything, content should scroll vertical*/
}
Simple css code :
body {
padding: 0;
margin: 0;
}
#header {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 50px;
background-color: red;
}
#sidebar {
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
width: 200px;
background-color: green;
}
#parent {
margin-top: 50px;
margin-left: 200px;
background-color: blue;
}
Example :
http://jsfiddle.net/rp4ss12b/
Your top bar and side bar need to be position: fixed;. Then your main content need to have a margin-top (in order not to be hidden by the top bar) and a margin-left (in order not to be hidden by the side bar).
You could do it like this:
html, body {
height:100%;
margin:0;
}
#header {
width: 100%;
height: 50px;
background-color: red;
position: fixed;
z-index:999;
}
#parent {
width:100%;
height:100%;
}
#sidebar {
padding-top:50px; /* padding-top must be the same as header height */
width:200px;
height:100%;
background-color: blue;
box-sizing:border-box;
position: fixed;
z-index:99;
}
#main-content {
position: relative;
width: 100%;
padding-left:200px; /* padding-left must be the same as sidebar width */
height: 300px; /* This could be anything, content should scroll vertical */
background: green;
box-sizing:border-box;
padding-top: 50px; /* padding-top must be the same as header height */
}
<div id="header"></div>
<div id="parent">
<div id="sidebar"></div>
<div id="main-content"></div>
</div>
Check this snippet, You can do this by using pure css as shown below or you can use display:inline-block or float elements but you need to set the width of right div using javascript.
html,body{width:100%;height:100%;margin:0;padding:0;}
#header{position:fixed;height:50px;width:100%;background:#000;top:0;left:0;}
#parent{background:red;width:100%;height:100%;display:table;border-collapse:collapse;}
#parent div{display:table-cell;padding-top:50px;}
#sidebar{width:200px;background:#444;color:#fff;}
#main-content{background:#ccc;padding:0;margin:0;}
<div id="header"></div>
<div id="parent">
<div id="sidebar">sadds</div>
<div id="main-content">dshajkashljk</div>
</div>