I'm trying to offset a body tag by some padding. However, I'd like to have the body adjusted so that it doesn't cause it to fall below the browser window and induce scrollbars.
Here is an example of what I'm trying to accomplish: http://jsfiddle.net/jM9Np/1/
HTML:
<body> </body>
CSS:
html, body {
height: 100%;
}
body {
margin-top: 20em;
background-color: LemonChiffon;
}
Ideally I'd like to subtract 20em from the body's height. Is there anyway to do this without any Javascript and in a manner that is supported by all browsers (with exception of Internet Explorer)? Thanks.
It depends. You can use borders, f.ex:
html {
height: 100%
}
body {
border-top: 20em solid #fff;
background-color: LemonChiffon;
}
http://jsfiddle.net/jM9Np/10/
But the best way IMHO would be to add another DIV inside the body and position it absolute:
html, body {
height: 100%
}
div {
position: absolute;
top: 20em;
bottom: 0;
left: 0;
right: 0;
background-color: LemonChiffon;
}
http://jsfiddle.net/za4e3/
I would do something like
html{
height: 100%;
background-color:black;
}
body {
height:80%;
margin-top: 20%;
background-color: LemonChiffon;
}
If you're targeting current versions of major browsers, you're lucky! This should work even on IE9 (see full support table):
html {
height: 100%;
}
body {
margin-top: 20em;
height: calc(100% - 20em);
background-color: LemonChiffon;
}
http://jsfiddle.net/jM9Np/3/
Related
<style>
html, body {
height: 100%;
}
img.one {
height: auto;
width: auto;
}
img.two {
height: 50%;
width: 50%;
}
</style>
In the css above, when I take out the height property of body and html something seems to happen but I don't understand what.
What is the purpose of setting the height to 100% for body and html?
Add border to see the differences.
html, body {
height: 100%; /* Ex: Change it 100% to %75 */
border: 2px solid red;
}
When you done you can remove the line.
If you remove the height from html, body then img.two { height: 50%; } has no reference height any more. 50% of what should it then be?
I tried to create a full screen website without scrollbars and have problems defining the margins for that. Given is a minimum example:
html {
margin: 0;
padding: 0;
height: 100%;
background: yellow;
}
body {
margin: 0;
padding: 0;
height: 100%;
max-height: 100%;
background: green;
}
h1 {
background: gray;
}
<body>
<h1>Heading 1</h1>
</body>
Why do I get the yellow background of the html element in the top of the side? Even more surprising to me is that the yellow part disappears, if I add text before the h1 element.
html {
margin: 0;
padding: 0;
height: 100%;
background: yellow;
}
body {
margin: 0;
padding: 0;
height: 100%;
max-height: 100%;
background: green;
}
h1 {
background: gray;
}
<body>
Add some text and the yellow part disappears.
<h1>Heading 1</h1>
</body>
Is there any idea to avoid the yellow part in the top without adding text before the heading element?
Your body element is a non-floating block-element, just as the contained h1 element. Therefore the size/position of the bodyelement adapts to its child-element h1, which has a margin (margin-top) defined as default.
There are multiple solutions for your problem, one is to make the body-element float. The advantage of this is (compared to removing the margin on the h1) is, that i will work the same way, even if a different element with a margin is inserted.
html {
margin: 0;
padding: 0;
height: 100%;
background: yellow;
}
body {
margin: 0;
padding: 0;
height: 100%;
max-height: 100%;
background: green;
float: left;
width: 100%;
}
h1 {
background: gray;
}
<body>
<h1>Heading 1</h1>
</body>
html {
margin: 0;
padding: 0;
height: 100%;
background: yellow;
}
body {
margin: 0;
padding: 0;
height: 100%;
max-height: 100%;
background: green;
float: left;
width: 100%;
}
h1 {
background: gray;
}
<body>
<h1>Heading 1</h1>
</body>
Just put margin-top:0; on your h1. Example here
I recommend using a CSS reset to avoid problems like this. Eric Meyer's is very well-known and simple.
When starting a new project or as a general rule, always try to reset a lot of the predefined css values that browsers "add". There's some "css reset" stylesheets already created, which you can find with a google search, but for a simple solution you can always start with:
* { margin: 0; padding: 0;}
Then you can always add additional rules that will affect all elements in your document like "font-family: sans-serif" etc.
That way you're sure that you have a solid starting point without having too many different looks across browsers.
Later on you can then add the rules more explicitly to the elements that need styling
this is how I would do a full screen website and it is very simple and clean:
<body>
<h1>Main heading</h1>
</body>
The CSS code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: green;
height: 100vh;
}
h1 {
color: #fff;
font-size: 40px;
}
So, if you give to your body a height of 100vh (viewport height) it will stay 100% of the window, no matter the size of it.Like this you won't have a problem with scrollbars.
This is why often something like normalize.css is added to a project to avoid these things with different browsers etc. height: 100vh; would work. To get ride of scroll bars you can also use overflow-y: hidden; or overflow-x: hidden; depending on the situation.
Try this:
.img-responsive { background-size: 100%; }
OR
.img-responsive { background-size: cover; }
Instead of img tag, use background-image for fullscreen image.
<header>
<div class="menu_area">...</div>
</header>
html, body, header {
height: 100%;
}
header {
background-image: url('images/image1.jpg');
background-size: cover;
}
I know this has been asked many times, but I'm stuck trying to get % height of an element to work. My understanding is the if the parent element has a height specified then setting a % height on the child element should work. Unfortunately I have tried to get this to work but I must be missing something.
body{
border-radius: 10;
height: 100%;
position: relative;
}
.child-element{
height: 50%;
margin: none;
background-color: gray;
}
Where I have:
<body>
<div class="child-element">
</div>
</body>
There is a parent element html for body tag also needs the height to be set.
html {
height: 100%;
}
Simplified demo below (removed unnecessary rules and reset default body margin too).
html, body {
height: 100%;
}
body {
margin: 0;
}
.child-element {
height: 50%;
background-color: gray;
}
<body>
<div class="child-element"></div>
</body>
If the intention is to present the available browser client area as containing a single content rectangle (rather than having a tall one that scrolls), I prefer to do:
body {
top: 0; left: 0; right: 0; bottom: 0;
overflow: hidden; position: overflow;
}
If the aim is to have a child panel that builds height from nothing, then you need to be aware that the height of objects is based on width of parent, not height when the object is not absolute or fixed position. It's possible to build a square as follows:
.square {
width: 20em;
background: cyan;
}
.square:before {
content: '';
display: block;
width: 0;
height: 0;
padding-top: 100%;
float: left;
}
.square:after {
content: '';
display: block;
clear: both;
}
}
<div class="square">Square</div>
You can change the aspect ratio of the block by changing the amount of padding.
Hope this helps.
Mark
I want to set my wrapper to be 100% height. But I am unable to do so despite setting the height to 100%.
Currently, My main_wrapper is empty. It should give me a background color of red.
My aim is to have a footer at the bottom using fixed but that is off topic. But it will be good if someone could give a link for position fixed.
<html>
<head runat="server">
</head>
<body class="body">
<form id="form1" runat="server">
<div id="main_wrapper">
</div>
<div class="clear"></div>
</form>
</body>
</html>
* {
margin: 0; padding: 0;
border: none;
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
-webkit-box-sizing: border-box; /* Safari */
}
.clear {
clear: both;
}
html {
margin: 0;
width: 100%;
height: 100%;
/* min-width: 640px; min-height: 480px;*/
}
body {
margin: 0; /*Top and Bottom 0, Left and Right auto */
width: 100%;
height: 100%;
}
.body #main_wrapper {
margin: 0;
width: 100%;
height: 100%;
backgroud: #f00;
}
#form1 #main_wrapper {
margin: 0;
width: 100%;
height: 100%;
background:#f00;
min-width: 640px;
min-height: 480px;
}
maybe it's just typo :
.body #main_wrapper {
margin: 0;
width: 100%;
height: 100%;
backgroud: #f00; } <<-- typo
There is nothing wrong with your code.
You are setting your divs height and width correctly but you forget that your div is inside a form, which you are not specifying the height/width.
Just add
#form1{ width: 100%; height: 100%; }
To your css and it will work fine.
EXAMPLE
er, yeah... check out http://jsfiddle.net/5PZcq/2/
#main_wrapper {
position:absolute;
margin: 0;
width: 100%;
height: 90%;
background: #f00;
}
#footer {
position:absolute;
top:90%;
height: 10%;
width: 100%;
background: blue;
}
I think this captures whats going here.
In order to control a div's size with percentages, you have to declare it position:absolute. The clear thing is cool but only works with floating divs. In my example I have the main div (90% tall) and a footer div (10% tall) with opacity less than one I can see entries stuck in the clear, but when the opacity line is removed, the 'clear' div disappears behind the main red div.
So the question is, why do you even need the clear thing at all? Obviously I can't tell the complete scope of your project. Does this example make more sense?
If you look at this fiddle: http://jsfiddle.net/bastien/PybrF/1/
#header {
position: fixed;
top: 0px;
left: 0px;
height: 50px;
width: 100%;
background-color: yellow;
}
#content {
top: 51px;
left: 0px;
bottom: 0px;
width: 100%;
height: 100%;
position: fixed;
overflow: auto;
background-color: orange;
}
If you resize the window then the vertical scrollbar gets visible in the content div. BUT it gets only visible (so it seems for me...) when I have exceeded the height in pixel of the header while resizing the window.
How can I get the vertical scrollbar correctly?
UPDATE
I want a header which stays fixed.
I want a content which has inside scrollbars.
something like this: http://jsfiddle.net/bastien/PybrF/7/
but the vertical scrollbars should start inside the content div and not start at the header/body.
Try this in your css:
* { margin: 0; padding: 0 }
#header, #content { width: 100%; position: absolute; }
#header {
height: 50px;
background-color: yellow;
}
#content {
top: 50px;
height: 70%;
overflow-y: auto;
background-color: orange;
}
Will produce this:
As for the height of the content to use all the space left, I would to a js function wired to the resize event to set the height of the content to the page height minus the height of the header. I honestly don't know another solution for this.
Due to your use of fixed positioning and application of overflow settings, only the #content area will scroll.
Consider this:
1) Add the orange background color to the body element and remove its margins:
body {
margin:0px;
padding:0px;
background-color: orange;
overflow-x: hidden;
overflow-y: auto;
}
2) Position the other elements relatively:
#header {
position: relative;
height: 50px;
background-color: yellow;
}
#container {
position:relative;
}
http://jsfiddle.net/PybrF/6/
EDIT:
I'm still unclear on what you're looking for, but here's another method.
This one keeps the header fixed and puts the scrollbar inside the #content area.
body {
background-color: orange;
margin:0px;
}
#header {
position: fixed;
top: 0px;
left: 0px;
height: 50px;
width: 100%;
background-color: yellow;
z-index:1; /* keep the header on top of the content */
}
#content {
position:relative;
padding-top:50px; /* height of the header */
}
http://jsfiddle.net/PybrF/8/
ok I knew it must work:
Still found some old similar code and refactored it:
have fun! :)
Sorry for telling crap.
Remove the width/height percentage settings and use the left/right/bottom etc settings. Thats enough.
Forget about the main div which was from this other project long ago.
http://jsfiddle.net/bastien/PybrF/12/