I've been strolling around the internet for a while but I can't seem the find a fix for my problem.
Perhaps you could help me out.
The issue
I am trying to wrap a div around 2 vertically stacked divs. At this moment I have a top div, which is viewport filling (100% height, 100% width) and a bottom div, which is of variable height but with a 100% width.
The top div serves as a container for horizontally and vertically aligned content.
As soon as I apply a wrapper to the two divs, the top one collapses. It stops filling the entire viewport height.
The example
The current HTML looks like this:
<div id="top">
<div id="top_content">Top content</div>
</div>
<div id="bottom">Bottom content</div>
With of course a JSFiddle: http://jsfiddle.net/4u4nqrcv/
The HTML I need looks like this:
<div id="wrapper">
<div id="top">
<div id="top_content">Top content</div>
</div>
<div id="bottom">Bottom content</div>
</div>
Also with a JSFiddle: http://jsfiddle.net/ggsztx78/
You can clearly see top div collapsed
The question
How can I wrap the 2 vertically stacked divs, maintaining the viewport filling height of the top div? I just need to find out exactly what CSS I should apply to the wrapper and possibly the 2 wrapped divs
You can use the viewport unit vh. 100vh = 100% of the viewport height.
http://jsfiddle.net/ggsztx78/3/
#top {
width: 100%;
height: 100vh;
background-color: #f4f;
display: table;
}
Support isn't that bad if you are not using vmin or vmax.
Working JSfiddle
It's easy, you did not set any css parameter to the wrapper, and it needed to also have height and width of 100%, margin and padding set to 0.
#wrapper{
width: 100%;
height: 100%;
margin:0;
padding:0;
}
You need to also give the wrapper a height: 100%.
By setting height: 100% you tell an element to become 100% of the height of its parent. Therefore you need to give all ancestors of the #top-content an height of 100% to make the #top-content take up 100% of the screens height.
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%;
}
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 want to equal two divs height when a div height large
example :
<div style="float:left;padding:2px;background:red;">B</div>
<div style="float:left;padding:2px;background:green;">A<br />C<br />D</div>
<div style="clear:both;"></div>
the Div 2 height larger then div one
I may have a possible solution for you:
http://jsfiddle.net/adaz/wRcWj/1/
Well, it'll probably work on ie7+ so I'm not sure if that's good enough for you.
Brief description:
1) Set position relative to the container and self-clear it (I've used overflow: hidden but you can also use clearfix).
2) Float one of the divs inside so the container will expand depending on content inside.
3) Set position absolute to one of your divs, and give it top and bottom position 0px, this will make sure that it has 100% height.
Cons:
- Lack of IE6 support
- You need to chose which div will always have less content and then position in absolute
Hope it helps!
This is typically the behavior of a table, so you can do this with display: table-cell. I based an example on Adaz's : http://jsfiddle.net/L2uX4/
Wrap the two div's whose height you are trying to equalize in a container div, i.e.
<div id="container">
<div class="column">A<br/>B</div>
<div class="column">C</div>
</div>
Set an explicit height on the container and set height=100% on the columns:
div#container {
float: left;
height: 10em;
}
div.column {
height: 100%;
background-color: red;
}
Sorry to ask a really obvious question I'm sure it has a really simple answer, I just can't figure it out.
Very simply I want to place images inside of divs, where the images fill 100% of the height of the div.
CSS
.container{
height:100%;
float:left;}
img {
height:100%;}
HTML
<div class="container">
<img src="xyz.jpg" />
</div>
The result is as expected but with a large amount of whitespace to the right of the image (within the div) when viewed in any non-webkit browser.
In my layout I want to have many of these divs lined up (by float) in a row so its essential that the div's width shrinks to that of the image.
http://jsfiddle.net/osnoz/VzrnT/
By default, a div without specified height dimensions only expands enough to encompass its contents. Without a specified width, the div will expand to the width of its parent. So until you specify the width, the div's width will not shrink down to the image.
Your div is set to 100% height, which is in relation to its container height, not its contents.
You also do not need to specify 100% on the image itself. This will only make the image stretch to 100% of its container's height. Unless, you specify a container height, this is pointless.
I don't know if I understood the question right, but here it goes:
.container { display: inline-block; height: 100%; }
.container img { height: 100%; }
See the example at jsfiddle.net/erxLv/2
I have never thought that writing a simple two column layout is so complicated using css....haha
What I want to do is the following:
When the height of the content div exceed the height of screen size, scroll bar exist only in the content div. The users can only scroll the content div but the sidebar keeps static
The two columns should have the same height
My layout is:
<---------------container------------------->
<-------------------header------------------>
<-----sidebar-------><---------content--->
<------------------footer------------------->
<---End of container------------------------->
Here is my css file:
http://137.189.145.40/c2dm/css/main.css
#WorldContainer
{
width: 1000px;
margin: auto;
overflow: hidden;
}
.ContentColumn
{
float: left;
width: 500px;
overflow: auto;
}
<div id="WorldContainer">
<div class="ContentColumn">
Content goes here!
</div>
<div class="ContentColumn">
Content goes here!
</div>
</div>
That will give you a page where the main div cannot scroll but the two div columns can. They will be side by side. You question wasn't exactly clear so hopefully this is what you were after.
EDIT: In response to you showing the example site.
Your problem is really simple.
All of your divs have a height rule of height: 100%;
When you use percentage height, you are making it a percent of the container it is within, i.e Its parent container. It is NOT a percentage height of the entire window.
Every container is specifying a percentage height so the result is a height of 0.
Give your outermost div a fixed height and the problem will be resolved.
Additional Edit:
If you are concerned with making sure the outermost div always stretches to the bottom of the window then this is a css solution using absolute positioning:
#OutermostDiv
{
position: absolute;
top: 0;
bottom: 0;
}
Using this approach still causes a calculated height even though the outer div doesn't have a hard coded height. This will allow you to use percentage heights on your inner divs and maintain a outer div that stretches from top to the bottom of the visible window.
You'd have to set your container element to overflow:hidden;, and your content div to overflow:scroll; (and possibly do overflow-x:hidden; to hide the horizontal scrollbar). The problem with this is that if your sidebar & content are going to be the same height, then you would have to have TWO scrollbars - one for content, and one for sidebar.
You could probably solve this by using another container element around just sidebar & content, and setting the overflow: scrollbar; overflox-x:hidden; on it instead of sidebar/content.
You can also use display:table and display:table-cell to create columns if you're facing difficulties with float. Here's the CSS:
#container
{
width:960px;
margin:0;
padding:0;
display:table;
}
#sidebar
{
width:300px;
display:table-cell;
}
#content
{
width:660px;
display:table-cell;
}
and the HTML is:
<div id="container">
<div id="sidebar">
<!-- Sidebar Content Here -->
</div>
<div id="content">
<!-- Content Here -->
</div>
</div>
Hope this solves your problem. But display:table doesn't work in some old browsers.