Using Bootstrap. I want the top div to be of fixed height according to the content and the bottom div to fill out the remaining height of the parent. The total height should be 100%.
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<div id="test">
<div>
Fixed height according to content.
</div>
<div class="fill">
Rest of the height
</div>
</div>
</div>
</div>
</div>
CSS:
html, body{
height: 100%;
}
.container-fluid, .row, .col-lg-6, #test{
height: 100%;
}
.fill {
background-color: #FF0000;
height: 100%
}
However it seems like the bottom div is exactly 100% and overflows. The idea is also that there will be several columns.
Thanks in advance!
Fiddle: https://jsfiddle.net/eb8v57pe/4/
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<div id="test">
<div class="header">
Fixed height according to content.
</div>
<div class="fill">
Rest of the height
</div>
</div>
</div>
</div>
</div>
#import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
html, body{
height:100%;
padding: 0;
border: none;
margin: 0;
}
.container-fluid, .row, .col-lg-2{
height: 100%;
}
#test {
display: table;
width: 100%;
height: 100%;
}
#test > .header {
display: table-row;
height: 1%;
}
#test > .fill {
display: table-row;
background-color: #FF0000;
}
Related
I'm creating a home page for my web application. I'm thinking of 3 vertical split layout for it. I have some piece of code to create 3 horizontal splits but however, my goal is to create 3 vertical splits. How can I do that?
The image below is to create 3 horizontal splits but again my objective is to create 3 vertical splits.
body,
html {
height: 100%;
padding: 0;
margin: 0;
}
<body>
<div style="width:100%; height :100%; background-color:Lime;">
<div style="width:100%; height:34%; background-color:Blue;">
a
</div>
<div style="width:100%; height:33%; background-color:Gray;">
b
</div>
<div style="width:100%; height:33%; background-color:Aqua;">
c
</div>
</div>
</body>
The expected output is 3 vertical split layout.
There are several ways to accomplish this. One is to use inline-block level display to line your divs up. The height here is arbitrary. Consider the following:
body,
html {
height: 100%;
padding: 0;
margin: 0;
}
.column {
display:inline-block;
width:33.33%;
margin-right:-4px;
height:500px;
}
.column-a {background-color:Blue;}
.column-b {background-color:Gray;}
.column-c {background-color:Aqua;}
<body>
<div class="container">
<div class="column column-a">
a
</div>
<div class="column column-b">
b
</div>
<div class="column column-c">
c
</div>
</div>
</body>
Another way to do this would be to use flex display. Here is a fiddle with a simple example. You can use the same markup, but change your css to this:
body,
html {
height: 100%;
padding: 0;
margin: 0;
}
.container {
display:flex;
}
.column {
flex:1;
height:100vh;
}
.column-a {background-color:Blue;}
.column-b {background-color:Gray;}
.column-c {background-color:Aqua;}
Welcome to Stack Overflow _
To neaten the code put the flex & height elements into CSS classes
// parent div
.flexDisplay {
flex: 1;
height: 100%;
}
// child divs
.flexHeight {
display: flex;
height: 100%;
}
.flexHeightResize {
display: flex;
height: 50%; // adjust percentage as required
}
then add to HTML
<div class="flexDisplay" style="background-color:Lime;">
<div class="flexHeight" style="background-color:Blue;">
A
</div>
<div class="flexHeightResize" style="background-color:Gray;">
B
</div>
<div class="flexHeight" style="background-color:Aqua;">
C
</div>
</div>
body,
html {
height: 100%;
padding: 0;
margin: 0;
}
.flexDisplay {
display: flex;
height: 100%;
}
.flexHeight {
flex: 1;
height: 100%;
}
.flexHeightResize {
flex: 1;
height: 50%; // adjust percentage as required
}
<body>
<div class="flexDisplay" style="background-color:Lime;">
<div class="flexHeight" style="background-color:Blue;">
A
</div>
<div class="flexHeightResize" style="background-color:Gray;">
B
</div>
<div class="flexHeight" style="background-color:Aqua;">
C
</div>
</div>
</body>
Try display: flex on the parent and flex: 1; height: 100% on the children
I have a header that I would like to be sticky both during vertical and horizontal scroll. I would like it to be sticky due to the height of the header being dynamic(otherwise I could use fixed if I'm not mistaken).
I have played around with a fiddle with no success :(
https://jsfiddle.net/Viktor/39v0gzjh/22/
CSS:
html, body{
width:100%;
background-color:red;
opacity:0.9;
padding:0;
margin:0;
}
.header{
position:sticky;
top:0;
left:0;
background-color:gray;
height: 100px;
padding:0;
}
.container{
display: flex;
}
.child{
width: 120px;
min-width: 120px;
max-width: 120px;
border: 1px solid #D8D8D8;
background-color: white;
font-weight: bold;
word-wrap: break-word;
}
.bigdiv{
width:1000px;
height:1000px;
}
HTML:
<div class="header">
This is my sticky header
</div>
<div class="container">
<div class="child">
child1
</div>
<div class="child">
child2
</div>
<div class="child">
child3
</div>
<div class="child">
child4
</div>
<div class="child">
child5
</div>
<div class="child">
child6
</div>
<div class="child">
child7
</div>
<div class="child">
child8
</div>
<div class="child">
child9
</div>
<div class="child">
child
</div>
</div>
<div class="bigdiv">
Very long div
</div>
If you are using bootstrap, just add fixed-top class to your header:
<div class="header fixed-top">
This is my sticky header
</div>
Otherwise, with css, header position should be "position:fixed;" and its width "width: 100%;" and then place other page content below like this fiddle:
https://jsfiddle.net/s071hnxL/
A better approach would be set overflow-x: scroll; on your html.
This will solve the issue.
Note that sticky, by specification, will not work inside element with overflow.
This is a known issue
Hence, try using javascript in combination with position:fixed
$(window).scroll(function() {
if( $(this).scrollTop() > 0 ) {
$('.header').addClass('sticky');
} else {
$('.header').removeClass('sticky');
}
});
html,
body {
width: 100%;
background-color: red;
opacity: 0.9;
padding: 0;
margin: 0;
overflow-x: scroll;
}
.header {
width: 100%;
background-color: gray;
height: 100px;
padding: 0;
}
.sticky {
position:fixed;
top:0;
width: 100%;
left:0;
}
.pt-100{
padding-top: 100px;
}
.container {
display: flex;
}
.child {
width: 120px;
min-width: 120px;
max-width: 120px;
border: 1px solid #D8D8D8;
background-color: white;
font-weight: bold;
word-wrap: break-word;
}
.bigdiv {
width: 1000px;
height: 1000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
This is my sticky header
</div>
<div class="container">
<div class="child">
child1
</div>
<div class="child">
child2
</div>
<div class="child">
child3
</div>
<div class="child">
child4
</div>
<div class="child">
child5
</div>
<div class="child">
child6
</div>
<div class="child">
child7
</div>
<div class="child">
child8
</div>
<div class="child">
child9
</div>
<div class="child">
child
</div>
</div>
<div class="bigdiv">
Very long div
</div>
position: sticky is working fine. The reason that you're unable to see it's effect is because of the position applied on div(not the visible text) and the width of the div, which is taking up 100% of its parent's div, which in this case is body. So when you're scrolling horizontally, you're still inside the div, which is taking up the complete width space available.
Now if you want to view the content inside div.header irrespective of the scroll, modify its width as width: 100vw and it should work fine.
You can verify by setting the width of body to 140% and .header to be 100vw
All the best. Cheers!
I am currently working on a script and in some pages there isn't enough content.In this case I want the page to cover 100% of the browser and put the footer at the bottom.I tried many codes and nothing seems to work I ended up by having a code like this:
<div class="container">
<div id=nav>
NAV
</div>
<div id=core>
<div id=content>
<div id=tophea>
TOP Content
</div>
<div id=msgs>
MSG Content
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</div>
and css like this :
#container{
height:100%
}
#nav{
height:55px;
}
#core{
height:100%
}
#content{
height:100%;
background:red;
}
Here is my jsfiddle : https://jsfiddle.net/k8k7o36b/
Any help will be appreciate. I'll be more than thankful if you add small explanation so I can understand what were I doing wrong.
Thanks
#container{
height:100%
}
#nav{
height:55px;
}
#core{
height:100%
}
#content{
height:100%;
background:red;
}
#footer {
background-color: orange;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow:hidden;
}
<div class="container">
<div id=nav>
NAV
</div>
<div id=core>
<div id=content>
<div id=tophea>
TOP Content
</div>
<div id=msgs>
MSG Content
</div>
</div>
<footer id="footer">
Footer
</footer>
</div>
</div>
This should do it. I changed div to a footer and added some styling to the #footer id so that it has a position: absolute; and bottom: 0;. You can look into what position: absolute does here.
Edit: Obviously, you can adjust the height of the footer however you want, I just set it to 100px and background-color orange so that we can see it better.
You can try with flexbox:
Note you need to use 100% on html and body and also your footer element at the same level of nav and core
html,body {
margin: 0;
height: 100%;
}
.container {
background: orange;
min-height: 100%;
display: flex;
flex-direction: column;
}
#nav {
flex: 0 0 auto;
height: 55px;
}
#core {
flex: 1 0 auto;
background: red;
}
<div class="container">
<div id=nav>
NAV
</div>
<div id=core>
<div id=content>
<div id=tophea>
TOP Content
</div>
<div id=msgs>
MSG Content
</div>
</div>
</div>
<div id="footer">
Footer <br> footer
</div>
</div>
You can use a flex layout and set the main content area to flex-grow: 1 so it will consume all of the available space between your nav and footer, and that will push the footer to the bottom of the page when there isn't enough content.
body,
.container {
min-height: 100vh;
margin: 0;
}
.container,
#core {
display: flex;
flex-direction: column;
}
#core,
#content {
flex-grow: 1;
}
<div class="container">
<div id=nav>
NAV
</div>
<div id=core>
<div id=content>
<div id=tophea>
TOP Content
</div>
<div id=msgs>
MSG Content
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</div>
You can use calculations in css to help with this.
#core {
height: (100vh - 55px)
}
100vh is 100% of the viewport, while he 55px is the height of the footer. Add any other elements to the calculation if you give them a height also e.g.
#header{
height: 45px
}
#core {
height: (100vh - 100px)
}
html,body,#container{
height:100%
}
#nav{
height:55px;
}
#core{
height:100%
}
#content{
height:100%;
background:red;
}
#footer{
position:absolute;bottom:0;
right:0;left:0
}
<div class="container">
<div id=nav>
NAV
</div>
<div id=core>
<div id=content>
<div id=tophea>
TOP Content
</div>
<div id=msgs>
MSG Content
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</div>
</div>
Add these classes
html,body{
height:100%
}
#footer{
position:absolute;bottom:0;
right:0;left:0
}
Here is a generic flexbox solution.
flex-grow: 1; tells main to fill the remaining space. This also has the benefit of not having to set a specific height on your footer.
Flexbox Support
Chrome 21+
Firefox 28+
IE 10+
Edge
Safari 6.1+
*Some might support the 2012 syntax or require a prefix like -webkit-
html {
height: 100%;
}
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100%;
}
header {
background-color: indianred;
}
main {
flex-grow: 1;
background-color: skyblue;
}
footer {
background-color: gold;
}
<header>
Header
</header>
<main>
Content
</main>
<footer>
Footer
</footer>
I have a specific layout that is causing me HUGE headaches. Here is an image:
My goal is to have the "Side panel" ALWAYS equal the height of the container. The "Enrollment Application" section is at 100% height already.
Current Markup
<body>
<div id="container" class="pure-g">
<div class="pure-u-md-1-4 pure-u-1 panel" id="left-panel">
<div class="panel-row">
<div class="panel p">
<div class="inner-panel">
<div class="panel-logo">
"Logo here text"
</div>
</div>
</div>
</div>
<div class="panel-row">
<div class="panel p">
<div class="inner-panel">
<nav class="panel">
</nav>
</div>
</div>
</div>
</div>
<div id="right-panel" class="pure-u-md-3-4 pure-u-1 panel p">
<div class="inner-panel">
<header class="pure-g">
<div class="pure-u-md-1-4 pure-u-1 header-logo">
LOGO Would go here, of course.
</div>
<div class="pure-u-md-3-4 pure-u-1 header-title">
<h1>Consumers Energy</h1>
<h1><strong>CARE 3.0 Program</strong></h1>
<h1>Enrollment Application</h1>
</div>
</header>
<div id="content">
"Enrollment application text..."
</div>
</div>
</div>
</div>
</body>
Current CSS
.panel {
box-sizing: border-box;
height: 100%;
display: table-cell;
}
.panel.p {
padding: 3px;
}
.panel .panel-row {
display: table-row;
}
.panel .inner-panel {
border-radius: 5px;
padding: 10px;
width: 100%;
box-sizing: border-box;
background-color: red;
}
Here is an alternative fiddle to play with: http://jsfiddle.net/3c3tqo3e/ but I really don't want to use a table...
Q How can we stack two divs and make their heights = 100% of parent? The "Logo here.." section will be an auto height.
NOTE I would really prefer an answer that is responsive-friendly. I am using PureCSS for the sections. (This means that absolute positioning is not preferred) Also, strongly prefer just css/html. Thanks!
I have created a demo for you, but it will work on all modern browsers only. and you might have to read flexbox and its demos in details to make your work more meaningful in terms of performance and maintenance.
Also read on calc() here
HTML:
<main>
<aside>
<div class="logo">Logo</div>
<div class="aside-content">Other Content</div>
</aside>
<section>Section</section>
</main>
CSS:
html, body{ height: 100%; }
main{
height: 100%; background: teal; padding: 2em; box-sizing: border-box;
display: flex; flex-direction: row;
}
aside{
height: inherit; margin: 0 1em 0 0; width: 200px;
}
aside .logo{
background: #fff; height: 140px;
}
aside .aside-content{
background: #fff; height: calc(100% - 150px); margin: 10px 0 0 0;
}
main section{
height: inherit; background: #fff; flex-grow: 2;
}
Demo Fiddle: http://jsfiddle.net/vpqqyo9L/1/
Edit:
Here's one for IE9: http://jsfiddle.net/vpqqyo9L/3/
Is it possible to make the wrapper fill the window height (no scrolling) and the center div scrollable without messing around with pixels and javascript?
<div id="wrapper">
<h1>Header</h1>
<div id="center">
<div style="height:1000px">high content</div>
</div>
<div id="footer">Footer</div>
</div>
Basically I want the header to be visible at the top and the footer to be always visible at the bottom and have a scrollable content in the center which occupies the remaning height.
The header, footer and center divs' heights are all unknown (no set px or %, i.e. variable font-size or padding). Is it possible with pure CSS?
2014 UPDATE: The modern way to solve this layout problem is to use the flexbox CSS model. It's supported by all major browsers and IE11+.
2012: The correct way to do this with CSS alone is to use display: table and display: table-row. These are supported by all major browsers, starting with IE8. This is not using tables for display. You'll use divs:
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 100%;
width: 100%;
background: yellow; /* just to make sure nothing bleeds */
}
.header {
display: table-row;
background: gray;
}
.content {
display: table-row; /* height is dynamic, and will expand... */
height: 100%; /* ...as content is added (won't scroll) */
background: turquoise;
}
.footer {
display: table-row;
background: lightgray;
}
<div class="wrapper">
<div class="header">
<h1>Header</h1>
<p>Header of variable height</p>
</div>
<div class="content">
<h2>Content that expands in height dynamically to adjust for new content</h2>
Content height will initially be the remaining
height in its container (<code>.wrapper</code>).
<!-- p style="font-size: 4000%">Tall content</p -->
</div>
<div class="footer">
<h3>Sticky footer</h3>
<p>Footer of variable height</p>
</div>
</div>
That's it. The divs are wrapped as you'd expect.
A cross-browser solution derived from Dan Dascalescu answer:
http://jsfiddle.net/Uc9E2
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.l-fit-height {
display: table;
height: 100%;
}
.l-fit-height-row {
display: table-row;
height: 1px;
}
.l-fit-height-row-content {
/* Firefox requires this */
display: table-cell;
}
.l-fit-height-row-expanded {
height: 100%;
display: table-row;
}
.l-fit-height-row-expanded > .l-fit-height-row-content {
height: 100%;
width: 100%;
}
#-moz-document url-prefix() {
.l-scroll {
/* Firefox requires this to do the absolute positioning correctly */
display: inline-block;
}
}
.l-scroll {
overflow-y: auto;
position: relative;
height: 1000px;
}
.l-scroll-content {
position: absolute;
top: 0;
bottom: 0;
height: 1000px;
min-height:100px;
}
<div class="l-fit-height">
<section class="l-fit-height-row">
<div class="l-fit-height-row-content">
<p>Header</p>
</div>
</section>
<section class="l-fit-height-row-expanded">
<div class="l-fit-height-row-content l-scroll">
<div class="l-scroll-content">
<p>Foo</p>
</div>
</div>
</section>
<section class="l-fit-height-row">
<div class="l-fit-height-row-content">
<p>Footer</p>
</div>
</section>
</div>
Using overflow:auto will let you do this.
demo
So what you are talking about is a sticky footer. I went and did some more research and here is what I have for you.
<div id="wrapper" style="height:100%">
<div id="header" style="float:none;"><h1>Header</h1></div>
<div style="overflow:scroll;float:none;height:auto;">high content</div>
<div id="footer" style="clear:both;position:fixed;bottom:0px;"><h1>Footer</h1></div>
</div>
This will give you a sticky footer. The key is position:fixed and bottom:0px;
Unfortunately this means it also hovers above any content in the scrollview. So far there seems to be only Javascript to figure this out but I will keep looking.