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
Related
I wanted to ask how I can define a div's minimum height in css.
For example if I am on a small screen and the line break has changed, the div should be automatically resized, but it should be at least 100%.
Just use min-height to keep the div height 100% or higher like this:
HTML:
<div class="someName">
<!-- child elements -->
</div>
CSS:
.someName {
min-height: 100%;
}
I have two children of the body element. Both the HTML and BODY elements are styled to height:100%. As for the children, the first has a fixed height of 100px and the other is set to height:100%.
HOWEVER, doing this displaces the second child element visually, pushing it down the page and creating a side scroll bar. Effectively, this child IS 100% the height of the body and html tags, but because it comes after the first child of 100px, the entire section is displaced down the page 100px and creates a side scroll bar.
I could use overflow: hidden on the one of the parent elements to clip this excess off, or use a negative margin on the second child to draw it back, but I'd prefer not to.
Ideally, the second element will come directly after the first child, and stretch to the bottom of the window and no more. I want the section#content to respond to viewports, so I don't want to set a explicit height for it either.
I've tried various positioning techniques on the parents and children, but still not what I'm after.
For example, setting the parent element to position absolute and pinning in to all four corners of the screen has no effect on the child elements height. It still maintains the proper height but still is effected by that 100px offset.
Here is some simple HTML:
<body>
<section id="header"></section>
<section id="content"></section>
</body>
I've set the html and body height to 100%, and given #header a height of 100px.
section #content I've given a height of 100%, but the problem is this section expands PAST the window height.
Here is my simple CSS:
html, body{
height:100%;
margin:0; padding:0;
}
section{
margin:0; padding:0;
}
#header{
height:100px;
}
#content{
background:white;
height:100%;
}
Any idea what's going on here? And more importantly, how to fix it??
Cheers
I've added a negative margin-top of -100px to #content (headers height) + added position: relative; to #header. Is that what you're looking for?
Here's a jsFiddle: http://jsfiddle.net/breadadams/1zptzjwr/
Well, you said it yourself what is going on... You are placing a full height element after a 100px height one. So, your document has a height of 100% + 100px. Nothing mysterious so far.
There are many approaches to create this kind of layout. My favorite involves using a display: table layout, that will auto size itself.
But a simple fix would be to use calc() on the second height (if you are not concerned about old IE versions...)
#content{
background:white;
height: calc((100%) - 100px);
}
Viewport-Percentage (or Viewport-Relative) Lengths:
These units are vh (viewport height), vw (viewport width), vmin (viewport minimum length) and vmax (viewport maximum length).
Try This.Link
Html:
<body>
<div class="wrapper">
<section id="header"></section>
<section id="content"></section>
</div>
</body>
Css:
body{
height:100vh;
margin:0; padding:0;
}
.wrapper {
height: 100%;
}
section{
margin:0; padding:0;
}
#header{
height:100px;
background:blue;
}
#content{
background:red;
height: calc((100%) - 100px);
}
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.
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.
I have a container div that has the height of my body which is 100%
#pageContainer{
width:800px;
margin:auto;
height:inherit;
}
inside it i have second div positioned absolutely
<div style="position:absolute;opacity:.05;background-color:white;width:inherit;height:100%;"></div>
So my page looks like this:
<body>
<div id="pageContainer">
<div style="position:absolute;opacity:.05;background-color:white;width:inherit;height:100%;"></div>
<div>some content here</div>
</div>
</body>
So the problem is the absolutely positioned div has height equal to the screen size, not the page, another words when page is heigher than the visible screen, when I scroll down the div is not expanding to the full height of the parent div (pageContainer). I have tried the top:0px;bottom:0px; as well and it doesn't work. Any one knows what's the trick here?
Javascript: You'd either use jQuery via .height() or EqualHeight,
or
CSS: you'd do something like this: CSS equal columns
You have to set the height of each element in the hierarchy to make it expand like this.
Try something like:
html, body {
height: 100%;
}
Setting the height of the html element is the one that I generally forget to do. It is usually also be necessary to set the #pageContainer height to 100%, although you have it inheriting from the body, so in this case you're okay.
Try adding position:relative; to your #pageContainer. Currently, the absolutely positioned div is taking it's position from the window and not the container div.