I have a bootstrap layout with two columns. On screens higher then 1000px content block is not stretch to the footer. I need it to expand vertically depending on the height of the user's browser window.
I've tried height:100%, min-height:100%; etc.
See my code below.
<div id="wrapContent" class="wrapContent">
<div class="container">
<div class="row">
<header>
HEADER
</header>
</div>
</div>
<div class="container">
<div class="row">
<div id="content" class="content clearfix">
<div class="col-xs-12">
<div class="flex-container">
<div class="col-xs-8 leftBlock">
LEFT BLOCK
</div>
<div class="col-xs-4 rightBlock">
RIGHT BLOCK
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<footer>
FOOTER
</footer>
</div>
</div>
html,body {
height: 100%;
min-height: 100%;
font-size: 1.2em;
}
.wrapContent {
overflow: visible !important;
height: auto !important;
min-height: 100%;
margin: 0 auto -71px;
padding-bottom: 70px;
background: #323742;
}
.container {
width: 1170px !important;
margin: 0 auto;
}
header {
overflow: visible;
height: 189px;
background: #222;
color: #fff;
}
.content {
min-height: 516px;
}
.flex-container {
min-height: 516px;
overflow: hidden;
margin-right: -15px;
margin-left: -15px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
.leftBlock {
background: #fff;
}
.rightBlock {
background: #ccc;
}
footer {
background: #222;
height: 71px;
color: #fff;
}
.div{
height: 100vh;
}
Add these lines to whatever container you want to stretch and it should work. I have tried it already :)
In your case:
.leftBlock, .rightBlock{
height: 100vh;
}
try this code, I think this is what you want.I wrote a full code for you.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.Header{
background-color: gray;
color: white;
height: 189px;
font-size: 25px;
}
.Bone{
background-color: orange;
color: white;
height: 400px;
color: white;
}
.Btwo{
background-color: red;
color: white;
height: 400px;
color: white;
}
.Footer{
background-color: black;
color: white;
height: 70px;
font-size: 25px;
}
</style>
<body>
<div class="container">
<div class="table-responsive">
<table class="table">
<thead>
<tr><div class="col-md-12 Header">Header</div></tr>
</thead>
<tbody>
<tr>
<div class="col-md-8 Bone">Left Block</div>
<div class="col-md-4 Btwo">Right Block</div>
</tr>
</tbody>
<tfoot>
<tr><div class="col-md-12 Footer">Footer</div></tr>
</tfoot>
</table>
</div>
</div>
</body>
</html>
just copy,paste and run it.if this is not the case tell me.
Thanks to everyone!
I've just wrote simple JS, and everythings works ok
function rightBlockHeight() {
var height = $( window ).height() - $( '#footer' ).height() - $( "#header" ).height();
$( '#content' ).css( 'min-height', height );
$( '.rightBlock' ).css( 'min-height', height );
}
$( document ).ready( function() {
rightBlockHeight();
} );
$( window ).resize( function() {
rightBlockHeight();
} );
Related
I have a requirement where I have to create 2 fixed width panels, one on right and one on left and I have to keep the center component responsive according to bootstrap classes.
I did something like this
Styles file
.c-row {
max-width: 100%;
margin: 0 auto;
}
.c-row .c-col-left {
width: 260px;
}
.c-row [class^='c-'] {
float: left;
height: 90vh;
background-color: white;
}
.c-row .c-col-center {
background-color: #e6e7fb;
width: calc(100% - (260px + 350px));
}
.c-row .c-col-right {
width: 350px;
}
Markup
<div class="c-row">
<div class="c-left">content</div>
<div class="c-center">
<div class="row">
<div class="col-md-6">c1</div>
<div class="col-md-6">c2</div>
</div>
</div>
<div class="c-right">content</div>
</div>
So my problem here is: The grid inside center class isn't working, it works fine if I remove the style width: calc(100% - (260px + 350px)); from center column.
is there any way I can still make it work without changing the custom grid outside?
Use flexbox which is integral to Bootstrap 4
.c-row {
max-width: 100%;
margin: 0 auto;
display: flex;
}
.c-row .c-left {
flex: 0 0 260px;
background: pink;
}
.c-row [class^='c-'] {
height: 90vh;
}
.c-row .c-center {
background-color: #e6e7fb;
flex: 1;
}
.c-row .c-right {
flex: 0 0 350px;
background: lightblue;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="c-row">
<div class="c-left">content</div>
<div class="c-center">
<div class="row">
<div class="col-md-6">c1</div>
<div class="col-md-6">c2</div>
</div>
</div>
<div class="c-right">content</div>
</div>
Codepen Demo
You can do it without custom flexbox use but only with the Bootstrap grid.
.col,
[class*="col-"] {
min-height: 90vh !important;
}
.c-left {
width: 260px !important;
background: lightpink;
}
.c-center-1 {
background-color: lightcoral;
}
.c-center-2 {
background-color: lightskyblue;
}
.c-right {
width: 350px !important;
background: lightblue;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="c-row row flex-nowrap">
<div class="col-auto c-left">content</div>
<div class="col c-center">
<div class="row">
<div class="col-md-6 c-center-1">c1</div>
<div class="col-md-6 c-center-2">c2</div>
</div>
</div>
<div class="col-auto c-right">content</div>
</div>
</div>
(some !important just because how SO snippets work, see codepen demo)
Codepen Demo
I have a JS Fiddle here.
https://jsfiddle.net/h3c6jqfy/
Basically, i am trying to make a UI that has a sticky header and footer. The middle content will have three columns. Each columns will have DIVs in them. These DIVs should have 100% height and not be cut off from the footer. Within the DIV, they will have scrollable divs.
The very basic layout I created has this in it...
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>this is the end!!
The part where it says this is the end!! is never reached.
You can use flexbox without the need to calculate heights;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
height: 75px;
background: red;
}
main {
flex: 1;
background: lightgreen;
display: flex;
}
.scrolly {
flex: 1 0 33%;
overflow-y: auto;
}
.content {
height: 1000px;
}
footer {
height: 50px;
background: blue;
}
<header></header>
<main>
<div class="scrolly">
<div class="content"></div>
</div>
<div class="scrolly">
<div class="content"></div>
</div>
</div>
<div class="scrolly">
<div class="content"></div>
</div>
</div>
</main>
<footer></footer>
NOTE: See Fiddle in Full Screen
You can try using flexbox instead of defining every unit, calculate the height to avoid using the space where the footer sits, and let the children div inherit its height
<style>
body, head {overflow: hidden;}
#header,#footer,#content { position:absolute; right:0;left:0;}
#header{
height:100px; top:0; background: #4A4A4A;
}
#footer{
height:100px; bottom:0; background: #4A4A4A;
}
#content{
top:100px;
height: calc(100% - 100px);
background:#fff;
display: flex;
align-items: stretch;
}
</style>
<div>
<div id="header">HEADER</div>
<div id="content">
<div style="background-color: #ff0000; min-width: 33%; height: inherit; overflow-y: scroll;">
<div style="background-color: blue;min-height: inherit;max-width: 99%;padding: 20px 40px;">
<div style="overflow: auto; max-height: inherit; padding: 10px;">
<br>d<br>d<br>d<br>d<br>d<br>d<br>d
<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br><br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d
<br>d<br>this is the end!!
</div>
</div>
</div>
<div style="background-color: #ff0000; min-height: 100%; min-width: 33%; max-width: 33%;float: left;">
<div style="background-color: red;min-height: 100%;max-width: 99%;padding: 20px 40px;">
middle
</div>
</div>
<div style="background-color: #ff0000; min-height: 100%; min-width: 33%; max-width: 33%;float: left;">
<div style="background-color: pink;min-height: 100%;max-width: 99%;padding: 20px 40px;">
right
</div>
</div>
</div>
<div id="footer">FOOTER</div>
</div>
I am trying to use a flexbox approach to create a layout that will resize the header width and content dimensions when a window is resized, but maintain the sidebar dimensions.
I found the following example from this Flexbox Approach to get me started, and it works as desired for the content div itself. But after looking it over, I'm unsure how to make it work as described with a fixed width, 100% height sidebar.
CSS from example:
<style>
html, body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto; /* The above is shorthand for: flex-grow: 0, flex-shrink: 1, flex-basis: auto */ }
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}
</style>
HTML from example:
<div class="row header">
<p><b>header</b> <br /> <br />(sized to content)</p>
</div> <div class="row content">
<p> <b>content</b> (fills remaining space) </p>
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>
The following codepen example gave me the information I needed to get my layout working:
http://codepen.io/JosephSilber/pen/HqgAz
CSS:
.header {
height: 50px;
}
.body {
position: absolute;
top: 50px;
right: 0;
bottom: 0;
left: 0;
display: flex;
}
.sidebar {
width: 140px;
}
.main {
flex: 1;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
display: flex;
overflow: auto;
}
.box {
min-height: -webkit-min-content;
display: flex;
}
.column {
padding: 20px;
border-right: 1px solid #999;
}
.column > div {
height: 2000px;
background: red;
}
.column:nth-child(2) > div {
height: auto;
}
/* All of these are just for this demo's design. */
body {
font-family: sans-serif;
font-size: 20px;
line-height: 50px;
text-transform: uppercase;
font-weight: bold;
}
.header {
text-align: center;
color: #fff;
background: #444;
}
.sidebar {
background: #666;
padding: 4px 20px;
color: #fff;
}
.page-header {
padding: 6px 20px;
background: #004141;
color: #fff;
font-size: .8em;
}
.content {
background: #ddd;
}
HTML:
<div class="header">Main header</div>
<div class="body">
Move this: <div class="sidebar">Sidebar</div>
<div class="main">
<div class="page-header">Page Header. Content columns are below.</div>
<div class="content">
<div class="box">
<div class="column">
<div>Column 1</div>
</div>
<div class="column">
<div>Column 1</div>
</div>
<div class="column">
<div>Column 1</div>
</div>
</div>
</div>
</div>
To here: <div class="sidebar">Sidebar</div>
</div>
To get the sidebar on the right side, I simply moved <div class="sidebar">Sidebar</div>to just above the closing div tag for the .body class.
I want the div which displays "D" to appear beneath that one which displays "A" so that divs with matching background colours appear stacked over one another. However, I am getting this:
Where exactly in my CSS code must I clear my float?
#container {
background-color: #333333;
width: 990px;
}
#left {
background-color: red;
width: 300px;
float: left;
}
#splitter {
background-color: green;
width: 90px;
float: left;
}
#right {
background-color: blue;
width: 200px;
float: left;
}
<div id="container">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div id="container">
<div id="left">D</div>
<div id="splitter">E</div>
<div id="right">F</div>
</div>
You have to deal with floats and for this you need to understand what floats and BFC are :
a few ways to do this, that you should understand once you been reading a bit about floats, clearing and Block formating context.
(last example in the snippet below, oldish, even avoids the floats but does the layout)
/* DEMO purpose : Show the id or class being used on that container*/
section:before {
content: attr(id)' 'attr(class);
display: table;
background: #177EE5;
padding: 5px;
margin: 5px;
color: #fff;
text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
letter-spacing: 1px;
font-variant: small-caps;
}
/* your css turned into class to be valid since used for many tags */
.container {
background-color: #333333;
width: 990px;
}
.left {
background-color: red;
width: 300px;
float: left;
}
.splitter {
background-color: green;
width: 90px;
float: left;
}
.right {
background-color: blue;
width: 200px;
float: left;
}
/* wrapper for each examples */
section {
clear: both;
overflow: hidden;
margin: 1em;
}
/* different ways shown, usefull for testing only if you read about floats and dig a bit */
/* table */
.table .container {
display: table;
}
/* overflow */
.overflow .container {
overflow: hidden;
}
/* float */
.float .container {
float: left;
}
/* flex */
.flex .container {
display: flex;
}
/* inline-block */
.inline-block .container {
display: inline-block;
vertical-align: top;
}
/* last examples without floats */
/*no float & ie8 */
#table div {
float: none
}
#table #first-row,
#table > div {
display: table-row;
}
#table > div > div {
display: table-cell;
}
#table {
background-color: #333333;
width: 990px;
table-layout: fixed;
}
#left {
width: 300px;
}
#splitter {
width: 90px;
}
#right {
width: 200px;
}
#table > div > div {
background-color: red;
}
#table > div > div + div {
background-color: green;
}
#table > div > div + div + div {
background-color: blue;
}
#table:before {
display: table-caption;
width: 100%;
margin: 0;
}
#table > div:after {
content: "Notice there's a gap to fill here since cols do not cover the 990px";
display: table-cell;
}
<section class="your CSS :-: no BFC involved">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="table">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="overflow">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="float">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="flex">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="inline-block">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<p>another way without float including IE8 ?</p>
<section id="table" class="table">
<div id="first-row">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>
</section>
There could be more examples from the same chunks of code and floatting children.
Clear the floats in the container.
You have 3 simple ways to do that:
1. Float
#container {
clear: both;
}
2. Overflow
#container {
overflow: hidden;
}
3. Micro clearfix hack
Link
Here is what you want done bro..
this one is by using display:inline-block https://jsfiddle.net/p4domjrb/
this one is by using float:left https://jsfiddle.net/p4domjrb/1/
.container {
background-color: #333333;
width: 990px;
display: block;
position: relative;
}
.left {
background-color: red;
width: 300px;
display: inline-block;
margin-left: -4px;
}
.splitter {
background-color: green;
width: 90px;
display: inline-block;
margin-left: -4px;
}
.right {
background-color: blue;
width: 200px;
display: inline-block;
margin-left: -4px;
}
don't use id I suggest use class isntead because idis called only once.
<style>
.container{
background-color: #333333;
width:990px;
display:block;
clear:both;
}
#left{
background-color: red;
width:300px;
float:left;
}
#splitter{
background-color: green;
width:90px;
float:left;
}
#right{
background-color: blue;
width: 200px;
float:left;
}
</style>
<body>
<div class="container">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div class="container">
<div id="left">D</div>
<div id="splitter">E</div>
<div id="right">F</div>
</div>
</body>
result is
I'm building a site that has two section sizes.
The sizes are:
Full screen (height: 100%;)
Half screen (height: 50%;)
See screenshots:
Note the section with three columns (green, pink, blue).
This works before the columns collapse at col-md-4.
Once the columns collapse, they overflow their container (height: 50%) and then theres 3 columns at 50% height (150%) the extra 100% covers up the last section (100%).
How can I get the height to expand if the container overflows?
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #fff4fd;
}
.wrapper {
height: 100%;
width: 100%;
position: relative;
}
.wrapper .content {
height: 100%;
width: 100%;
}
.home {
background-color: red;
background-attachment: fixed;
}
.what-we-do {
background-color: blue;
}
.our-work {
background-color: #93A8FF;
}
.our-ethos {
background-color: yellow;
}
.case-studies .row {
height: 100%;
margin: 0;
}
.case-studies .row > div {
height: 100%;
}
.case-studies .row > div.case-study-1 {
background-color: #D1F3F0;
}
.case-studies .row > div.case-study-2 {
background-color: #FFEBF1;
}
.case-studies .row > div.case-study-3 {
background-color: #D7EEF9;
}
.page.page-full {
height: 100%;
}
.page.page-half {
height: 50%;
}
/*# sourceMappingURL=app.css.map */
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="bower_components/modernizr/modernizr.js"></script>
<div class="wrapper">
<div class="content">
<div class="page page-full home"></div>
<div class="page page-half what-we-do"></div>
<div class="page page-half our-work"></div>
<div class="page page-half case-studies">
<div class="row">
<div class="col col-md-4 case-study-1"></div>
<div class="col col-md-4 case-study-2"></div>
<div class="col col-md-4 case-study-3"></div>
</div>
<div class="cleafix"></div>
</div>
<div class="cleafix"></div>
<div class="page page-full our-ethos clearfix"></div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="bower_components/jquery/dist/jquery.min.js"><\/script>')
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
See screenshot: