I am just trying to create a basic website using Material Design Light that responds to the size of the screen and I am having trouble making the grid fill all of the available height. I have tried to look for solutions to this problem online but I cant find any that work.
Here is the source code for one the grids I will use:
<main class="mdl-layout__content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray;">size 4</div>
<div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray;">size 4</div>
<div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray;">size 4</div>
</div>
</main>
Here is a link to the full Html page: Example MDL Page
Here is an image of the problem: Page Example
I'm assuming that your page height is the view height, which you can only use w/ modern browsers. See view height
Basically what we're doing here is we already know how high our footer and header are going to be (in the fiddle i just set it to 50px each). Then we use the calc CSS property to set the view height (vh) to 100% - 100px (meaning the footer and header's height put together (50+50 = 100)
Check the fiddle
<div id="main-body">
<div class="header"></div>
<div class="content clearfix">
<div class="a">1</div>
<div class="a">2</div>
<div class="a">3</div>
<div class="a">4</div>
</div>
<div class="footer"></div>
</div>
* {
box-sizing: border-box; /* add for browser prefixes */
}
#main-body {
height: 100%;
overflow: hidden;
}
.header, .footer {
background-color: blue;
height: 50px;
}
.content .a {
height: calc(100vh - 100px);
background-color: red;
width: 25%;
float: left;
}
.clearfix:after {
content: "";
clear:both;
display:table;
}
Note that you'll also need the viewport meta tag in your <head> for this to work.
<meta name="viewport" content="width=device-width, initial-scale=1">
OP added the he would like the ability to center the text within these content divs
<div id="main-body">
<div class="header"></div>
<div class="content clearfix">
<div class="a"><p>1</p></div>
<div class="a"><p>2</p></div>
<div class="a"><p>3</p></div>
<div class="a"><p>4</p></div>
</div>
<div class="footer"></div>
</div>
#main-body {
height: 100%;
overflow: hidden;
}
.header, .footer {
background-color: blue;
height: 50px;
}
.content .a {
height: calc(100vh - 100px);
background-color: red;
width: 25%;
float: left;
position: relative;
}
.content .a p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
.clearfix:after {
content: "";
clear:both;
display:table;
}
Th way I did it was to over-ride a couple of the mdl styles, notably to make main display as flex rather than inline-block. It would probably make sense to add an Id to restrict the impact of this override across the rest of your site
.mdl-layout__content {
display: flex;
flex-direction: column;
.mdl-grid {
width: 100%;
flex-grow: 2;
}
}
Try to fool around with the CSS height attribute. Like so:
<div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray; height:100%;">size 4</div>
<div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray; height:100%;">size 4</div>
<div class="mdl-cell mdl-cell--4-col" style="text-align:center; background-color:gray; height:100%;">size 4</div>
More information here: http://www.w3schools.com/cssref/pr_dim_height.asp
Related
I have built a template to layout what I intend to accomplish. Everything seems to work well with what I have learned from the stackoverflow community.
However, the Footer which is its own container and has "section7" as another DIV is not displaying as 150 pixels in height. Basically all sections have fixed height except for Section 5 and Section 6 which have to scale in height depending on the browser window size or content that will be placed inside the section. So if content is sparse, I just want the height to be 100% of the remaining browser space so that the website is top to bottom. However if there is content that is lengthy obviously I want the middle section to adapt and continue as required. Hope I am making sense.
The challenge is I don't know where I am wrong and thus do not know how to pose the question in the search function as I imagine it is an easy task for those with experience. Any help is appreciated.
The HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sample Website</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="header">
<div class="section1">section 1</div>
<div class="section2">section 2</div>
<div class="section3">section 3</div>
<div class="section4">section 4</div>
</div>
<div class="middle">
<div class="section5">section 5</div>
<div class="section6">section 6</div>
</div>
<div class="footer">
<div class="section7">section 7</div>
</div>
</div>
</body>
</html>
The CSS:
#charset "utf-8";
/* CSS Document */
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0px;
background-color:#DBDBDB
}
div.container {
width: 1200px;
background-color:#FFFFFF;
margin-left:auto;
margin-right:auto;
}
div.header {
height: 100px;
}
div.middle {
min-height: 400;
}
div.footer {
height: 150px;
}
div.section1 {
background-color:#FF0004;
height: 100px;
width: 275px;
float:left;
position:relative;
}
div.section2 {
background-color:#FFA600;
height: 100px;
width: 100px;
float:left;
position:relative;
}
div.section3 {
background-color:#00C304;
height: 50px;
}
div.section4 {
background-color:#DFDD00;
height: 50px;
}
div.section5 {
background-color:#0A00FF;
width: 275px;
height: 400px;
float:left;
height: 100vh;
}
div.section6 {
background-color:#CB05B1;
width: 925px;
height: 400px;
float:right;
height: 100vh;
}
div.section7 {
background-color:#9E9E9E;
height: 150px;
}
Floating elements need to be cleared so that elements following align correctly and do not move into the elements you have floated. Section 5 and Section 6.
Add the following class definition to your stylesheet
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
Change the following tag <div class="middle"> to <div class="middle clearfix">
HTML5 also includes <header> and <footer> elements, as well as <article> tags to make the document language more semantic. So for HTML5 you can use
<header>
<div class="section1">section 1</div>
<div class="section2">section 2</div>
<div class="section3">section 3</div>
<div class="section4">section 4</div>
</header>
And
<footer>
<div class="section7">section 7</div>
</footer>
https://jsfiddle.net/raythcael/s49o4rjz/2/
To make .section7 have a height of 150px add display: inline-block;
div.section7 {
background-color: #9E9E9E;
height: 150px;
display: inline-block;
}
See: https://jsfiddle.net/zvkxj6v8/
The reason why the height isn't working as it should is because the Div's above it is set to "float". Add "clear: both;" to div.section7 to clear the floats.
https://jsfiddle.net/2L55g0f9/1/
because section 5 and 6 are floated, you're not seeing the height of section 7. All i did was clearfix it, and you got your height :)
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
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/
I created a sample of the situation in JSFiddle
I updated JSFiddle Here: http://jsfiddle.net/x11joex11/r5spu85z/8/ (this shows in more detail how the sticky footer works so well, just height issue).
I want the table to take up the remaining height, for some reason the height: 100% is not working?
From my tests it appears to be related to min-height: 100%. I need that to make the sticky footer work.
So a solution for me is another way to do the sticky footer, or a way to still give 100% height to the elements within.
HTML
<div class="wrapper">
<div class="wrapper_content">
<!--Header-->
<div class="header">Header</div>
<div class="content table">
<div class="row">
<div class="l_cell">left</div>
<div class="r_cell">right</div>
</div>
</div>
<div class="push"></div>
</div>
</div>
<!--Footer-->
<div class="footer">Footer</div>
CSS
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
min-height: 100%;
margin: 0 auto -50px;
background-color: black;
}
.container {
}
.table {
display: table;
height: 100%;
width: 100%;
background-color: yellow;
}
.row {
display: table-row;
}
.l_cell {
display: table-cell;
width: 265px;
background-color: orange;
}
.r_cell {
display: table-cell;
background-color: purple;
}
.header {
background-color: red;
width: 100%;
}
.footer {
height: 50px;
background-color: green;
}
.push {
height: 50px;
}
Here is one solution, http://jsfiddle.net/7t4RT/
This question has been asked many times before. I recommend viewing some of the answers already provided here at StackOverflow.
The reason that we're unable to use height: 100% in your example is because no height has defined. The CSS is wondering... well how high is 100%? There are many ways to get our elements to fill their containers in either HTML or CSS. Simply choose one you feel works better for you.
The following is one of many ways to solve this problem.
HTML:
<div class="fill-height">
<p>Filled</p>
</div>
<div class="cant-fill-height">
<p>Not Filled</p>
</div>
CSS:
body {
background-color: #ccc;
}
.fill-height {
background-color: #0ff;
width: 200px;
position: absolute;
top: 0;
bottom: 0;
}
.cant-fill-height {
background-color: #ff0;
width: 200px;
height: 100%;
margin-left: 200px;
}
I found an answer to my problem for now, but it requires the use of display:table which I recall causes other errors down the road, but it does appear to work right now to create the layout I had in mind.
http://jsfiddle.net/x11joex11/r5spu85z/10/
CSS
body,html{margin:0;padding:0;height:100%;}
.wrapper{}
.table{
height:100%;
width:100%;
display:table;
background-color:yellow;
}
.row{display:table-row;}
.cell{display:table-cell;}
.footer{background-color:green;height:50px;}
.header{background-color:red;height:30px;}
.left{background-color:purple;}
.right{background-color:orange;}
HTML
<div class="wrapper table">
<div class="header row">
Header<br/>
Header2
</div>
<div class="content table">
<div class="row">
<div class="cell left">leftt<br/>left2</div>
<div class="cell right">right<br/>right2</div>
</div>
</div>
<div class="footer row">
Footer
<br/>
Footer2
</div>
</div>
An answer not requiring the use of display:table or table tags is preferred.
Notice the sticky footer effect remains.
I am currently building a wordpress site, where I need a 100% width background (css color, no image) for a div. My div is inside a container and I can't modify the html. So, I was wondering if there was any way with css to do this. I have already tried the padding+margin hack, but it didn't work.
HTML:
<div class="container">
<div class="row-fluid">
<div class="main span12">
<div class="row-fluid blue"> <!--this is the div that needs the background-->
<div class="span4">some content</div>
<div class="span4">some content</div>
<div class="span4">some content</div>
</div>
<div class="row-fluid">
<div class="span12"> some other content, doesn't need the background</div>
</div>
</div>
</div>
</div>
Any help is much appreciated. I tried this one : http://www.sitepoint.com/css-extend-full-width-bars/ but it didn't work.
Based on this article from CSS Tricks (Full Width Browser Bars ).
HTML
<div class="container">
<div class="level"></div>
<div class="level purple"></div>
<div class="level"></div>
</div>
CSS
html, body {
overflow-x: hidden;
}
.container {
width:960px;
margin: 0 auto;
border:1px solid black;
}
.level {
height:100px;
background: #bada55;
}
.purple {
position: relative;
background: #663399;
}
.purple:before,
.purple:after {
content: "";
position: absolute;
background: #663399; /* Match the background */
top: 0;
bottom: 0;
width: 9999px; /* some huge width */
}
.purple:before {
right: 100%;
}
.purple:after {
left: 100%;
}
Codepen Demo
Support should be IE8 & up
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.