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.
Related
There is an inline-block element with 100% height and width :
<div style="width: 100%; height: 100%; background: red; display: inline-block">Y</div>
Why doesn't this div take up whole height, but takes up full width?
An auto width on a block box causes it to be as wide as its containing block allows. An auto height, on the other hand, causes it to only be as tall as its contents.
The block box in question is body, and by extension, html. Neither element has an intrinsic height (even though the initial containing block does), so the height of both elements defaults to auto.
The 100% width and height of the inline-block respect the used width and height of its containing block, which in this case is body. If you specify any arbitrary height on body, or height: 100% on both html, body, then the inline-block will be adjusted accordingly.
Note that because an inline-block is essentially the same as a block box except laid inline, percentage width and height are calculated the same way as if the element were block-level.
It takes height of its parent
try:
html,body {
height: 100%;
}
That's because a div by default takes full width, unless specified otherwise.
Making it inline-block, just allows it to be inline, but preserving its block nature such as setting width and height, top and bottom margins and paddings.
And the height of every element(not-null) in html markup is same as height of a line.. which can be changed by line-height property.
And if you wish it to take all-height, follow the above answers.
Because your html and body tags don't take full height.
Unless specified otherwise, block elements take full width, but only as much height as needed - it is only natural, since HTML was originally meant as a way to format text documents. You wouldn't want, say, a paragraph to take the full window height.
You must set their height to 100% to get it work - stretch them to the window height:
html, body {
margin: 0;
padding:0;
height:100%;
}
http://jsfiddle.net/gdyLs/1/
You need to specify height to html and body then only that div will take 100% height
html, body{
height: 100%;
}
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%;
}
http://www.mysecretathens.gr/kulte_test/as_index.html
I am trying to override the width of #kontainer in my <li> list at the bottom. I want the .nav3 list to be full width, 100% but I cant override the 700px of the parent element, #kontainer
What can I do? I tried the !important; rule, but that didn't give me the results I wanted.
When specifying percentage width, it calculates based off the parent's width. So 100% of 700 is... 700.
You need to specify a pixel width if you want it to go over 700.
Solution 1: You can get .nav3 out of #kontainer
Solution 2: You can add position: absolute; left: 0; to .nav3 and then add some margin-top on #footer tu push it down.
Width 100% means get 100% of the parent element that the child is inside. It actually does what you said it to do! You can get nav3 out of the #kontainer to take the 100% of the body element.
I want the same thing, to override the parent width.
I'm developing a Joomla component
<div class="container mainbody"> //** width 1170px **//
<div>some content</div>
<div>some content</div>
</div>
I don't want to change the width (1170px) of the outer div or .container class because it is default in Joomla template, which will take effect in every page if I change.
In my case, I only need a 100% width for some child div in my website's home page for some design.
What I did is add css in home page html file, since it will not call in other page.
<div class="container mainbody">
<div class="container">some content, width 1170px</div>
<div>some content, width 100%</div>
</div>
<style type="text/css">
.mainbody
{
width:100% !important;
}
</style>
For the div you want a full page width, you should use:
position: absolute;
left: 0px;
right 0px; //but make sure that any content you have below that div, gets margined in response.
margin-top: 200px; //Use the height of the above div
I have just noticed a "VERY" interesting (and bold) way of overriding the parent element's width. Set the child's width to something like:
width: calc(100% + 30%);
Believe it or not, at least Firefox 51 is calculating correctly the child's width, and yes, it is bigger than the parent's width.
in my html, I have something like
<html>
<head>
</head>
<body>
<div id = "main">
<div> I'm 500px tall</div>
<div> I'm xxxpx tall</div>
</div>
</body>
</html>
and my css is like
head, body, #main{
height:100%;
width: 100%;
}
otherDivs{
height: some number of px
}
display for everything are either block or inline, there is no float
positioning are either absolute or relative
and what happened was that the #main (&body&html which wraps it) height was not full page height (only around 2/3 of page height), and some divs contained in the #main actually exceed the main's height
I had this fixed by changing height:100% to min-height:100%
but could not understand why the elements would exceed their parent divs height, I'm 100% sure all height of the children divs are declared in px, would't #main automatically wrap them?
Instead of using height:100% for #main, use overflow:hidden; property
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.