I am building a page with two columns side-by-side that should fill the entire page. Both columns should both be 50% of the available width with no margin or padding on either side and take up 100% of the available height depending on the resolution.
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
body>* {
flex-shrink: 0;
}
.login-column {
float: left;
width: 50%;
background-color: #F4F6F9;
margin: 0;
}
.news-column {
float: left;
width: 50%;
background-color: #75BFF0;
/* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, #75BFF0, #C9E7FF);
/* Standard syntax (must be last) */
margin: 0;
flex-grow: 1;
}
<div class="row">
<div class="login-column">
<h1>Login</h1>
</div>
<div class="news-column">
<h1>News</h1>
</div>
</div>
Currently, the divs have no padding or margin on the top, left, and right; however, the background color only extends to the end of the text. I want the background to extend to the bottom of the page, without a scrollbar.
On a side note, I am using divs. Is this still recommended or should I be using the new, HTML5 things such as article, aside, .etc?
In order to get a DIV to fill the page in height you need to use this :
CSS
div {
height: 100vh;}
Also everything is explained in this post :
How to make a div 100% height of the browser window
remove floats, you can add height to your columns 100vh but in your head section of the page should be <meta name="viewport" content="width=device-width, initial-scale=1">
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
body>* {
flex-shrink: 0;
}
.row {
display: flex;
}
.login-column {
flex: 0 0 50%;
background-color: #F4F6F9;
margin: 0;
height: 100vh;
}
.news-column {
flex: 0 0 50%;
background-color: #75BFF0;
/* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, #75BFF0, #C9E7FF);
/* Standard syntax (must be last) */
margin: 0;
height: 100vh;
}
<div class="row">
<div class="login-column">
<h1>Login</h1>
</div>
<div class="news-column">
<h1>News</h1>
</div>
</div>
You can simply include height in div classes.
.login-column {height: 100%;}
.login-column {height: 100%;}
You shouldn't use floats and position: absolute, unless you absolutely know what you're doing. I suggest using a flex container to do what you want, and use max-height to make the two columns (sections) fill out the whole screen height. If you just use height: 100vh, the columns will stay at that height blocking things from overflowing.
Also note how I use class syntax to reuse CSS code.
body {
margin: 0;
padding: 0;
}
.flex-container {
width: 100%;
display: flex;
}
section {
min-height: 100vh;
flex-basis: 50%;
box-sizing: border-box; /* To let padding be part of the width */
padding: 1rem;
}
section.left {
background-color: #F4F6F9;
}
section.right {
background-image: linear-gradient(to bottom right, #75BFF0, #C9E7FF);
}
<body>
<div class="flex-container">
<section class="left column">
Ladidaa
</section>
<section class="right column">
Tralalaa
</section>
</div>
</body>
Did you try to create a content div that contains the columns, i would try something like this.
* {
padding: 0;
margin: 0;
}
body, html {
height: 100%;
}
.columns-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.login-column {
display: flex
background-color: #F4F6F9;
margin: 0;
width: 50%;
}
.news-column {
display:flex;
background-color: blue;
margin: 0;
width: 50%;
height: 100%;
}
<div class="columns-container ">
<div class="login-column">
<h1>Login</h1>
</div>
<div class="news-column">
<h1>News</h1>
</div>
</div>
Regarding use of div, article and aside, actually they are used for to code semantic Html to get the best result for Search Engine Optimization and other bots related activity also good for other developers to understand code flow. Not answering your primary question as it already answered many times, let me know if you are not satisfied with other answers :)
Note: Using div is all fine in your case, don’t worry.
Related
I'm trying to center an element in the middle of the page. I can center it just fine, but if I resize the page vertically until the view height is smaller than the centered element, the element goes offscreen vertically without a scrollbar. You can see a demonstration of the issue here:
http://codepen.io/mse/pen/BWayXV
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
.outer {
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.inner {
display: inline-block;
width: 400px;
height: 800px;
background: grey;
}
<div class="outer">
<div class="inner"></div>
</div>
I should mention that I have tried a couple of other methods of vertical centering, including flexbox, and I'm still running into the same issue. Is there a way to solve this problem with this method of vertical centering, or is there at least a vertical centering method that does not have this issue?
Try this
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
.outer {
display:flex;
justify-content:center;
align-items:center;
}
.inner {
background: #ccc;
width: 400px;
height: 600px
}
<div class="outer">
<div class="inner"> I'm a block-level element centered vertically within my parent.</div>
</div>
More info: https://css-tricks.com/centering-css-complete-guide/
CSS VH center generator: http://howtocenterincss.com/
This should work
* {
padding: 0;
margin: 0;
}
html, body {
height: 100vh;
}
.outer {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
width: 400px;
height: 800px;
background: grey;
}
<div class="outer">
<div class="inner"></div>
</div>
You can try to limit the size of your inner element. If you define size by a fixed px amount it will start scrolling as soon as the screen becomes smaller than that px amount. If you are ok with changing the height of the inner element you could use vh or you can implement #media queries to decrease the size on smaller screens. Here#s an example:
.inner { height: 100vh; /* 100 view height percentage*/}
Note: The viewport-percentage lengths are relative to the size of the initial containing block and affected by the presence of scrollbars on the viewport.
As an example, I've made a fiddle:
https://jsfiddle.net/L7mwpzux/3/
How do I make the div .container minimally fill the screen?
So when there is almost no content, it still fills the screen.
It's for a page that is shown when the checkout cart is empty. The content is too thin, so the screen is not fully filled with content.
P.s. I am not looking for an answer that assumes that the header or footer has a static height. I want to be able to use it also in situations where the height of the header or footer is variable.
Also, I would love a CSS solution, so no JavaScript or jQuery
You can use calc() and set 100vh - height of header, also add box-sizing: border-box to keep padding inside.
* {
box-sizing: border-box;
}
body,
html {
margin: 0;
padding: 0;
}
header {
height: 200px;
background-color: blue;
width: 100%;
}
.container {
padding: 50px;
min-height: calc(100vh - 200px);
}
footer {
width: 100%;
height: 200px;
background-color: #333;
}
<header>
</header>
<div class="container">
small text
</div>
<footer>
</footer>
Other approach is to use Flexbox and set display: flex on body which is parent element in this case with min-height: 100vh and then just set flex: 1 on .container so it takes rest of free height.
* {
box-sizing: border-box;
}
body,
html {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
height: 100px;
background-color: blue;
}
.container {
padding: 50px;
flex: 1;
}
footer {
height: 100px;
background-color: #333;
}
<header>
</header>
<div class="container">
small text
</div>
<footer>
</footer>
try this
min-height: calc(100vh - 400px);
here is the fiddle https://jsfiddle.net/L7mwpzux/1/
I am trying to set up my page layout to take up 100% of the screen but am running into problems with content overflowing into the footer.
Here's the code for the first example:
HTML:
<div class="container page-container">
<div class="page-leftSidebar">
<div class="sidebar" role="complementary">
<h4>Widget Title</h4>
</div>
<main class="post-wrapper" role="main">
<section class="entry-content">
<p>This makes the entire page 100% height, but <code>.post-wrapper</code> is not for some reason.</p>
</section>
</main>
</div>
</div>
<footer class="siteFooter">
<p>Copyright 2015 Me.</p>
</footer>
CSS:
/* Generic */
html,
body { height: 100%; }
body {
background-color: #f3f3f3;
margin: 0;
padding: 0;
}
/* Containers */
.container {
margin: 0 auto;
width: 90%;
}
.page-container { min-height: 100%; }
/* Page Content */
.post-wrapper {
background-color: #fff;
min-height: 100%;
}
/* This is the row that will hold our two columns (sidebar and content) */
.page-leftSidebar {
width: 100%;
min-height: 100%;
}
.page-leftSidebar:after {
clear: both;
content:" ";
display: table;
}
.page-leftSidebar .sidebar { -webkit-background-clip: padding-box; }
#media (min-width: 60em) {
/* Page container */
.page-leftSidebar .post-wrapper {
-webkit-background-clip: padding-box;
min-height: 100%;
}
/* Left Sidebar */
.page-leftSidebar .sidebar {
float: left;
width: 19.25%;
}
/* Right Content */
.page-leftSidebar .post-wrapper {
float: left;
margin-left: 2%;
width: 78.75%;
}
}
/* Site Footer */
.siteFooter {
background-color: #2b303b;
color: #555555;
text-align: center;
padding-bottom: 50px;
padding-top: 50px;
}
/* FULL PAGE HEIGHT */
.container { min-height: 100%; }
.post-wrapper,
.page-leftSidebar,
.sidebar {
display: block;
position: relative;
height: 100%;
}
I got things kind of working here, but my .post-wrapper container is still not 100% height: http://jsfiddle.net/1re4vLq4/10/
However, the above example does work if there is a lot of content on the page: http://jsfiddle.net/1re4vLq4/9/ (Note: that both this and the above example are using min-height)
Then I got the entire page (including .post-wrapper) to be 100% height by using height instead of min-height: http://jsfiddle.net/9m1krxuv/4/
Changed CSS:
.container { height: 100%; }
.post-wrapper,
.page-leftSidebar,
.sidebar {
display: block;
position: relative;
height: 100%;
}
However, the problem with this is when there is a lot of content on the page, it overflows onto the footer (you can see this by making the result pane in JSFiddle smaller): http://jsfiddle.net/1re4vLq4/8/ Which shouldn't be the case (nor do I want to hide the text using overflow: hidden).
Any suggestions or ideas on how to go about fixing this? I'm looking for the entire page to be at least 100% height, including .post-wrapper (which is the right column with a white background).
If you have a "full-sized" container that you want to always match the height of the viewport - you're best not to add content that will overflow (go beyond) that div, as you're essentially defeating the purpose.
Short answer: Remove height: 100%; from your .container CSS rule.
I've created a basic Fiddle example combining full-viewport-height divs, and divs that just hold a lot of content.
HTML:
<div class="full-div red height-full">
<!-- Full sized div. Content should fit within the viewport -->
</div>
<div class="full-div blue">
<div class="inner-div">
<!-- Add long lorem ipsum here. -->
<!-- Notice that the parent div does not contain the height-full class -->
</div>
</div>
<div class="full-div green height-full">
<!-- This div will get "pushed down"only because the div above is NOT height 100% -->
</div>
CSS:
html,body{ height: 100%; margin: 0; padding: 0; }
.full-div { overflow: auto; }
.height-full { height: 100%; }
.inner-div { width: 90%; background-color: white; margin: 0 auto; }
.inner-div span { text-align: center; }
DEMO here: http://jsfiddle.net/175mrgzt/
Ultimately, when you set a DIV to 100% - its expected to be 100% of the viewport (graphical viewing region of the browser). Once you add content that extends that you're essentially going over 100% - and in that case, you might as well remove the set height, and let HTML make the adjustments for you.
Trying to stack 3 DIVs vertically, so that the top DIV is 25% of screen height, middle is 50%, and bottom is 25%, but they seem to extend the screen and I end up having a scrollbar.
body,html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#top {
width: 100%;
height: 25%;
background: #464646;
}
#middle {
width: 100%;
padding: 15px 0 15px 0;
margin: 0 auto 0 auto;
min-width: 657px;
height: 50%;
text-align: center;
vertical-align:middle;
}
#bottom {
width: 100%;
padding: 15px 0 15px 0;
height: 25%;
background: #988056;
}
<div id="top"></div>
<div id="middle"><img src="logo.png"></div>
<div id="bottom"></div>
As Hashem mentions in a comment above, box-sizing: border-box is considered best practice nowadays. Add the following to your CSS and you should be good to go:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Here is a good read-up for you.
That said, if you are working on an existing product and have lots of legacy code that would be broken if you did this, you need to work around the margins and paddings on your site sections, they add height, and that makes it all add up to more than 100%.
And if you are uncomfortable with that as well, look up flex-box layout. Only works in modern browsers though, so don't do it if you need old IE support.
This is due to the padding that you have added to middle and bottom divs.
The width and height styles always specify the width/height of textual area i.e. width/height of the "div's content" and they do NOT include the padding value. The padding is an extra space added apart from the width/height.
Try the following, and it should give you the desired results:
HTML:
<div id="top"></div>
<div id="middle"><img src="logo.png"></div>
<div id="bottom"></div>
CSS:
body,html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#top {
width: 100%;
height: 25%;
background: #464646;
}
#middle {
width: 100%;
margin: 0 auto 0 auto;
min-width: 657px;
height: 50%;
text-align: center;
vertical-align:middle;
}
#bottom {
width: 100%;
height: 25%;
background: #988056;
}
Working LIVE.
The CSS flexbox layout module is especially made to handle requirements like this.
You can use the flex-grow property:
The flex-grow property is a sub-property of the Flexible Box Layout module.
IT defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
For example, if all items have flex-grow set to 1, every child will set to an equal size inside the container. If you were to give one of the children a value of 2, that child would take up twice as much space as the others.
*{
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
#container{
-webkit-display:flex;
-moz-display:flex;
-ms-display:flex;
display:flex;
-webkit-flex-direction:column;
-moz-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column;
height:100%;
}
#top {
-webkit-flex:1;
-moz-flex:1;
-ms-flex:1;
flex:1;
background: #464646;
}
#middle {
-webkit-flex:2;
-moz-flex:2;
-ms-flex:2;
flex:2;
background:dodgerblue;
}
#bottom {
-webkit-flex:1;
-moz-flex:1;
-ms-flex:1;
flex:1;
background: #988056;
}
<div id="container">
<div id="top"></div>
<div id="middle"></div>
<div id="bottom"></div>
</div>
In this scenario, since you're concerned about screen height, you might want to investigate the 'vh' css rule.
For instance, if you wanted to stack your top, middle, and bottom evenly, you could do it with pure css:
#top, #bottom, #middle {
height: 32vh;
}
Or, as pertains to the question:
#top { height: 25vh; }
#middle { height: 50vh; }
#bottom { height 24vh; } /*24 vh so you have a little wiggle room*/
Examine here:
body { margin : 0; padding: 0}
div { border: #ccc solid 1px; }
#top { height: 25vh; }
#middle { height: 50vh; }
#bottom { height: 24vh; }
/*24 vh so you have a little wiggle room*/
<div id="top">top</div>
<div id="middle">middle</div>
<div id="bottom">bottom</div>
I found several questions about but none of their solutions was working for me so here we go again.
Let's say I have this template of HTML
<html>
<div id="header">...</div>
<div id="contentA">...</div>
<div id="contentB">...</div>
<div id="footer">...</div>
</html>
The footer div should be at least 80px height, but if those 80px plus the height of all other 3 divs is not enough to fullfill the screen I want the footer to increase as much as the screen is filled with it below header, contentA and contentB.
BG-Color Solution
If you just want to let the remaining space have the same background-color as the footer (but not the body), you could add the footer bg-color to the html-tag:
html {
background-color: #footer_color;
}
body {
background-color: #body_color;
}
#footer {
min-height: 80px;
}
.
JS-Solution
If you have something more complex within your footer, you could use javascript/jquery to calculate the remaining space and set the footer to that height.
There is a similar question with a code example here: https://stackoverflow.com/a/14329340/3589841
.
Flexbox-Solution
If you only care about the latest browsers you can use the flexbox-box-model:
HTML:
<html>
<body>
<div id="flex_container">
<div id="header">...</div>
<div id="contentA">...</div>
<div id="contentB">...</div>
<div id="footer">...</div>
</div>
</body>
</html>
CSS:
html, body {
min-height: 100%;
}
#flex_container {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
}
#header {
flex: 0 1 auto;
}
#contentA {
flex: 0 1 auto;
}
#contentB {
flex: 0 1 auto;
}
#footer {
flex: 0 1 100%;
min-height: 80px;
}
I believe you're going for something like this, have a look http://jsfiddle.net/dusUK/
Using CSS, we create a class, which in this case is fullheight, and we apply the following:
.fullheight {
display: block;
position: relative;
background: red;
height: 100%;
}
We also then apply the following to html, body
html, body {
height: 100%;
min-height: 100%;
}