here is the live link: http://mrgsp.md:8080/a/Account/SignIn
the main div (green one) doesn't take 100% of the screen height
you will notice this only if you have a big screen
and the code is basically
<body>
<div class="loginpage">
<div id="loginbox">stuff inside loginbox</div>
</div>
</body>
.loginpage {
background:none repeat scroll 0 0 green;
padding:200px;
}
Sorry for my English...
put the background style in body... is better.
body{
background: green;
}
If you still want to put a height for the div, you must put 100% height for the div, for the body, and for HTML too.
html, body, .loginpage{
height: 100% ;
}
You could give the body the green background color?
You can't simply set a div height to 100%, because it will interpret that as 100% of its container.
The simplest solution to your problem is to set the background color on the body element, but alternatively, you can use your method by setting the body tag to have a height of 100%. This will give your div something to fill fully. If the body or whatever container of the div doesn't have a height set, then the browser defaults the css property of the div to height: auto.
Related
I'm trying to expand the body's height to be beyond 100% of the page.
If i set
body, html { height: 100%;
background-color: darkbrown; }
.container { height: 100%; }
then if the content inside container goes beyond 100% it overflows and the color isnt saved. The problem here is that unless I remove the height or change it to min-height it will continue this behavior. What can I do to change this? Keep in mind that setting height % is necessary to create sticky footer.
Here's a fiddle with a better expample:
http://jsfiddle.net/hfqGu/1/
ive tried setting overflow to auto but with no avail.
Remove height:100% specified for the body tag.
I am trying to use height property using percentages, but it doesn't work. I want to use percentage so it looks fine in any resolution.
<div id="bloque_1" style="height: 80%;background: red">
</div>
How can I make it work?
When you are using % for width, or height, the 1st question you should ask is that 80% of what? So you also need to apply height to the parent element, so assuming that this element of yours is inside the body tag, you need to use this in your CSS
html, body {
height: 100%;
}
So now your div element will be 80% of 100%
Demo
Side Note: Also when you are dealing with absolute positioned elements, you may come across a scenario where your div won't exceed the current viewport height, so in that case you need to have min-height
Everything outside of bloque_1 will need a height as well, or you'll get 80% of 0.
You may also have to apply a height of 100% to the body.
Here's a jsfiddle that shows it in action.
Apply 100% height on your parent element
HTML code-
<html>
<body>
<div id="bloque_1" style="height:80%;background:red;width:100%;">
</div>
</body>
</html>
CSS Part-
html, body { height: 100%; width: 100%; margin: 0;background: #3c3c3c }
Working Fiddle - http://jsfiddle.net/SEafD/1/
Demo
html,body{
height:100%
}
#bloque_1{
background:red;
height:80%;
}
I set body {margin: 0 auto; width: 900px;}
100% width of display
I want one of div (or section) inside that body to be 100% of display (not its parent 900px, but more).
What styles should be applied for this div?
<body>
<div>
900px width of this text
</div>
<div style="???">
the whole 100% length of display
</div>
</body>
I don't think you can do it if you set a width on <body>. I'd leave <body> alone and do something like:
div {
width: 900px;
}
div.fullwidth {
width: 100%;
}
and then make sure your content is a series of <div>s, some of which have class="fullwidth" (such elements need to be non-nested, since for a nested element "100%" will be interpreted as "100% of the containing element" which in turn works out to "100% of 900px").
If you want the <div> to be 100% of the screen width, you must set display property in CSS.
display:block;
An example.
You can set position:absolute; which would keep it from inheriting the width from the body.
http://featuredfotografer.com/
The .Codemirror div in combination with the #header div takes up more height than the height of the browser. How can I make them have a combined height of 100% of the browser window so I have no scrollbar?
making combined height equal to the height of the browser window
Just add this snippet of code. It will set your content to 100% of browser window.
body,html {
height: 100%;
}
Also you can check this.
I would take a different approach to this. You can make a small 1px high and 30px wide image that looks like the background behind the line numbers and apply it to the body with a repeat-y and aligned left. Remove the height:100% on the .CodeMirror div
Alternately you can
add <div class="CodeMirror-gutter bodyGutter"></div> just before your closing </body> tag and add this to your CSS, and also again remove the height:100% on the .CodeMirror div:
.bodyGutter {
height: 100%;
z-index: -1;
width: 20px;
left: -8px;
}
This is also adding a fake gutter to your body and pushing it to the background to give the fake appearance of 100% height.
I have a layout with a body tag. Body tag as css width for 960px;
I would like have a DIV inside the body tag, and I need this div be 100% width of the browser windows.
Unfortunately at the moment I'm not able to get the result because the internal div inherit from the body.
My question; How to force a div to scale at 100% width of the current Browser windows even if inside a body tag?.
PS. I try !important on width attribute but does not work
Thanks
You cant in your case. Instead of width:960px for the body use wrapper.
<body>
<div class="wrapper">
my content goes here
</div>
<div>
my 100% width div goes here
</div>
</body>
.wrapper { width:960px; margin:0 auto; }
I think your layout background is 100%, but your layout width is 960px. If it is your problem, then take 1 pixel vertical background top to bottom..
use jquery to get the width of the window : $(window).width() and update the width of the div using jquery with something like : $("#theIDofDiv").css( "width", widthVar );
note that this is not standard and in a proper format and the code hasnt been tested but in theory if body doesnt have overflow:hidden, you should be able to get the result you want