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;
}
Related
I have a iFrame that I cannot get flush on the left side of the web browser. It appears to be stuck. It seems to be off around 300 - 400 px. Any Ideas? Thank you.
Here my CSS code below:-:
.wrapper {
display: block;
position:fixed;
top: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 100px 0 20px;
}
.wrapper iframe {
height: 100%;
width: 100%;
}
<div class="wrapper">
<iframe src="My Source"></iframe>
</div>
In this case it is the margin of the body tag, just include this in your css:
html, body {margin: 0px;}
demo: https://jsfiddle.net/1ap4fg30/
You need to take into account the default styles of the browser engine.
To make all elements render consistently across browsers you need to use some type of css reset or normalising style sheet.
Take a look at this for example: https://necolas.github.io/normalize.css/
I was able to resolve this issue by making a simple modification to the CSS.
I added left: 0; to the CSS.
Here is what it looks like now:
.wrapper {
display: block;
position:fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 100px 0 20px;
}
.wrapper iframe {
height: 100%;
width: 100%;
}
Thank you to all who assisted and viewed.
I also suggest checking out Peter's reply, as the information that he provided is very beneficial and informative.
-Z
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?
I would like to have a html/css layout, which has a div#header and div#body as direct children of body tag. I want div#body to fill the remaining space and I do not want to use JavaScript. I know it is possible if you know the exact height of the div#header. But i do not want to fix that.
example with fixed div#header
<head>
<style>
html, body {
position: relative;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
div {
width: 100%;
}
#header {
position: relative;
<!-- i want to remove height because i want the header to size itself
dependent on it's content -->
height: 100px;
background-color: red;
}
#body {
<!-- I want to make the body position relative and set top to 0
but that does not work as expected.-->
position: absolute;
top: 100px;
margin: 0;
bottom: 0;
background-color: green;
height: auto;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="body">body</div>
</body>
Please let me know if there is any alternative which uses divs and css.
Many thanks in advance!
You can set the min-height of the body div to 100% to stretch out the body div (I've changed the body bg color to make it more obvious).
However, I'm not 100% clear on your second requirement (<!-- I want to make the body position relative and set top to 0 but that does not work as expected.-->)
Fiddle here
Here is the updated answer: what i have done is to make the parent html and body to display as a table and other divs to have properties of table row and this css will make them capture the whole screen area.
Now i have given the header height of auto.
and
#body is inheriting the other space.
Try this: http://jsbin.com/ezozeb/5/edit
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display:table;
}
#header {
background-color: red;
display:table-row;
height:auto;
}
#body {
background-color: green;
display:table-row;
height:inherit;
}
First of all, delete the height and width of the body element.
You can use page wrappers to make that happen:
#PageWrapper
{
width: 844px;
background-color: ##4628C4;
margin: auto;
}
#PageContentWrapper
{
width: 659px;
float: left;
background-color: #e1e1e1;
min-height: 500px;
padding: 10px;
}
The pagecontentwrapper sets the minimum height to 500px.
In html you can then assign these identifiers to the body and divs
<html>
<head>
<link...>
</head>
<body id="PageWrapper">
<div id="PageContentWrapper">
Content of the body
</div>
</body>
</html>
If you want to make a div scrollable, you should define a height and/or width and add this to the css:
overflow-x:auto; <!--horizontal-->
overflow-y:auto; <!--vertical-->
For example, if you set the pagewrappers height to 1000 (not the min-heigt) and overflow-y: auto; then the scrollbars will appear when content get out of bounds.
If you want to make the header always on top, you should apply something like this:
#PageWrapper
{
width: 844px;
background-color: ##4628C4;
margin: auto;
}
#Header
{
background-color:#aaaaaa;
width: 844px;
height: 240px;
}
#PageContentWrapper
{
width: 659px;
height: 700px;
overflow-y: auto;
float: left;
background-color: #e1e1e1;
padding: 10px;
}
and in html
<html>
<head>
<link...>
</head>
<body id="PageWrapper">
<div id=Header>
Headertext
</div>
<div id="PageContentWrapper">
Content of the body
</div>
</body>
</html>
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/
I'm trying to create a page that takes 100% of the height of the page, without displaying a scroll bar. However, I wanted to add a header above this, and when I do, a scroll bar appears due to extra height. I've tried compensating with a negative bottom margin to compensate for the extra length, but this doesn't seem to change the length. How can I prevent a scroll bar from appearing with this layout?
Here is the code I have:
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: orange;
}
div#header {
background-color: red;
height: 50px;
}
div#content {
background-color: yellow;
height: 100%;
margin-bottom: -50px;
}
</style>
</head>
<body>
<div id="header">
HEADER
</div>
<div id="content">
Test Content
</div>
</body>
</html>
Edit: I did try a margin-top: -50px with a padding-top: 50px on the content div before. However it doesn't behave as I expected, as the content will overlap the header even if I set a z-index.
Here's another way
http://jsfiddle.net/b27e8/
* {
margin: 0;
padding: 0;
}
body {
background-color: orange;
}
div#header {
background-color: red;
height: 50px;
}
div#content {
background-color: yellow;
top:50px;
bottom:0px;
width:100%;
position:absolute;
}
I fixed your problem using:
div#header {
background-color: red;
height: 10%; }
div#content {
background-color: yellow;
height: 90%;
margin-bottom: -50px; }
You might have to play with the %'s to fix that...
Edit: I used Firefox 6 to test that, BTW. You can get exact percentages too, using decimals (eg, 95.6%