I have a question. I'm creating a single column website that consists of a header, body and footer. I'm able to get the footer to stick to the bottom of the page during re-size, however my question is this. How do I get the window to "eat" the footer div when re-sizing rather than having it pushed up? A good example would be ign.com
* {
margin: 0;
}
body
{
height: 100%;
background-image: url("..");
}
html
{
height: 100%;
}
.wrapper
{
width: 950px;
min-width: 950px;
min-height: 100%;
height: auto
height: 100%;
margin: 0 auto -4em;
border: 2px solid black;
}
.footer, .push
{
height: 4em;
border: 2px solid black;
}
What you're asking for is the default behavior of block elements.
Example:
HTML:
<header></header>
<div></div>
<footer></footer>
CSS:
header, footer {
height: 5em;
}
div {
height: 100em;
}
Demo
My advice would be to add more content to your page, or set a larger min-height to the wrapper.
Add the following code to the footer and set certain min-height to the html document.
.footer {
margin:1% 0;
}
Related
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/
My page has a max width of 1280px. The body is centered on larger screens using margin: 0 auto; Now I want to place an element in the bottom right corner. That has to be fixed as it should scroll with the content. On screens larger than 1280px the element should stay on the corner of the centered body and not stick to the right side of the window.
The element should stick there, independent of the current viewport width.
I've solved this by using a combination of media-query and CSS3-calc operation. It feels like an overkill for this simple task but I can't find a solution simpler as mine. Here is some sample css (I've changed the maximum page width to 500px here):
body {
max-width: 500px;
height: 1000px;
margin: 0 auto;
padding: 0;
border: 1px solid black;
}
div {
position: fixed;
right: 0;
bottom: 0;
height: 30px;
width: 30px;
margin: 0;
padding: 0;
background-color: red;
}
#media all and (min-width: 515px) /*max body width + (element width / 2)*/ {
div {
margin-right: -webkit-calc((100% - 500px) / 2);
margin-right: -moz-calc((100% - 500px) / 2);
margin-right: calc((100% - 500px) / 2);
}
}
JSFiddle: https://jsfiddle.net/nh95dc8u/
My JSFiddle shows exactly what I want. I'm just asking if this is possible to achieve with more "standard-CSS" (I'm not really sure about calc across different browsers)? What could be a simpler solution?
#media all and (min-width: 515px) {
div {
right: 50%;
margin-right: -250px;
}
Moves fixed div to 50% of window width and then to 50% of container width
https://jsfiddle.net/nh95dc8u/5/
You could also do it with just one more element and a bit of CSS.
As example, your HTML could be:
<div class="content">
Your content here
<div class="fixed-wrapper">
<div class="fixed">HEY</div>
</div>
</div>
And then, the CSS:
.content {
max-width: 500px;
margin:0 auto;
position:relative;
}
.fixed-wrapper {
position:absolute;
bottom:0;
right:0;
width:30px;
height:30px;
}
.fixed-wrapper .fixed {
position:fixed;
width:30px;
height:30px;
bottom:0;
background:red;
}
By adding position:relative to .content and using a wrapper to the fixed element, you can position it where you would like. As an element with no specified position renders where its parent is, you can just omit the right property from the fixed element and let the wrapper position it for you.
For an example, see this FIDDLE.
You can get rid of both calc and the media query by wrapping it in another div, which is horizontally aligned like body, and has the same width as body, but is fixed and sticks to the bottom of the screen.
Inside that div, you can then float the red little box to the right.
Although the outer div only seems to behave like body with max-width: 100% and width set to body's max-width + 2 (for the left and right border):
body
{
max-width: 500px;
height: 1000px;
margin: 0 auto;
padding: 0;
border: 1px solid black;
}
.hack
{
position: fixed;
bottom: 0;
max-width: 100%;
width: 502px;
margin: 0 auto;
padding: 0;
}
.box
{
height: 30px;
width: 30px;
margin: 0;
padding: 0;
background-color: red;
float: right;
}
<body>
This is the centered body
<div class="hack">
<div class="box">E</div>
</div>
</body>
Updated fiddle.
Tested and working in Chrome 44 and IE 8.
Remove media-query also it will work,
Remove and see the output again
Output
Try this in simple css -
.main{
width: 500px;
height: 1000px;
margin: 0 auto;
padding: 0;
border: 1px solid black;
}
.footer {
position:fixed;
bottom: 0;
height: 30px;
width: 30px;
left:510px;
background-color: red;
}
Here is the fiddle - https://jsfiddle.net/maL5nvbu/
I want to get rid of all padding around the main page elemnts on the front page of my FRC team's website www.powerhawks.org because I am re-writing the page. I have a separate page where I am developing the new content that page is here. If I remove all padding from the page element that includes the top menu so I have used inspect element to find that this code affects the element I want to remove padding for.
/* base : layout
/* ------------------------------------ */
#wrapper { min-width: 1024px; height: 100%; }
.container { padding: 0 20px; }
.container-inner { max-width: 1380px; min-width: 1380px; width: 100%; margin: 0 auto; }
.main { background-color: #fff!important; position: relative; }
.main-inner { position: relative; min-height: 600px; /* instead of sticky footer */ }
.content { width: 100%; position: relative; }
.pad { padding: 0px 30px 20px; }
This is for the entire website though. The only way I know how to make this affect the front page is if I were to edit the div but I need access to the full HTML file for that which I do not know how to find.
Your body has unique classes for each page. For example, using page-id-442 for sponsorship.
Trying putting .page-id-442 in front of your CSS selector:
.page-id-442 .container { padding: 0 20px; }
Hi so i have a line that i want to put on my website. Although i have tried a few things like z-index, position: fixed ect. i can't seem to get the line to span the whole browser length, while still having the margin-auto width for the website 900px;. Is their anyway to "override" the margin width of 900 and for the line to span the whole website while being static. I have also tried taking the div out of the body tags and that didn't seem to work either.
.line {
position: static;
background-color: #d1d1d1;
width: 100%;
height: 1px;
margin-top: 20px;
}
body {
margin: 0px;
padding: 0px;
margin: 0 auto;
width: 900px;
}
If the line is part of your body then width:100% will make it 900px (the width you set on your body)
They way around is to set body width to 100%, and then create a wrapper (with width 900px) for your main content and a separate line div for the line across the full width.
Added a fiddle: http://jsfiddle.net/xrqezvxz/
your css would look something like:
body {
margin: 0px;
padding: 0px;
width: 100%;
min-height:500px;
}
.line {
position: fixed;
background-color: #d1d1d1;
width: 100%;
height: 5px;
margin-top: 20px;
}
.content_wrapper
{
width:900px;
background-color:red;
min-height:500px;
height:500px;
margin:0 auto;
}
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>