I'm sorry if the question look stupid,
I found many question on the subject, but none who help me.
I have 2 div in my body,div1 which SHOULD be 100% height (not working either) and the second with a content which will change depending on situation, I want the second div to recover 30 % of the page, idc if there is something in or not.
I try height:30%, I can put 30% or 100% , it will take the height of the content.
(ps : I don't want to put a static height:px; or position:absolute;)
my CSS :
body{
font-family: "Gill Sans MT";
}
#div1{
background-color: yellow;
height: 100%;
}
#div2{
top: 5%;
height: 30%;
width: 50%;
margin-left: 20%;
background-image: url(../image/vent.png);
}
Thanks
HTML
<div id="div1">ss</div>
<div id="div2">aa</div>
CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#div1 {
background: red;
width: 50%;
height: 100%;
float: left;
}
#div2 {
background: blue;
width: 50%;
float: left;
min-height: 30%;
}
http://jsfiddle.net/A86Ta/1/
In #div2 min-height is 30%, so if content takes more space then that, height will increase. If you don't want that, just put height instead of min-height.
Related
<style>
html, body {
height: 100%;
}
img.one {
height: auto;
width: auto;
}
img.two {
height: 50%;
width: 50%;
}
</style>
In the css above, when I take out the height property of body and html something seems to happen but I don't understand what.
What is the purpose of setting the height to 100% for body and html?
Add border to see the differences.
html, body {
height: 100%; /* Ex: Change it 100% to %75 */
border: 2px solid red;
}
When you done you can remove the line.
If you remove the height from html, body then img.two { height: 50%; } has no reference height any more. 50% of what should it then be?
Here is the html & css problem I'm trying to solve:
HTML & CSS:
#fixedLeftMenu {
display: inline-block;
height: 50px;
background-color: yellow;
width: 25px;
position: fixed;
}
#container {
display: inline-block;
background-color: orange;
width: calc(100% - 25px);
margin-left: 25px;
}
#redFixedDiv {
height: 100px;
background-color: red;
width: 25%;
position: fixed;
}
#blueDiv {
float: right;
height: 1000px;
background-color: blue;
width: calc(100% - 25%);
}
<div id="fixedLeftMenu"></div>
<div id="container">
<div id="redFixedDiv">
</div>
<div id="blueDiv"></div>
</div>
The yellow div is a fixed div with a fixed width.
The red div is a fixed div but % width.
The blue is % width;
You can see that the red and blue div's DO NOT match 100% width (the orange div container) as excepted.
The red div is being over the blue one.
If I remove the fixed position of the red, everything will be OK, but I do want it to be fixed. It maybe complex html, but I really trying to solve it. Is it possible? What I'm missing here that causes that html/css behavior?
Here is the fix for your problem.
#fixedLeftMenu {
display:inline-block;height: 50px;background-color:yellow;
width: 25px;
position: fixed;
}
#container {
display:inline-block; background-color:orange;
width: 100%;
margin-left: 25px;
}
#redFixedDiv {
height: 100px; background-color: red;
width: 25%;
position: fixed;
}
#blueDiv {
float:right;height: 1000px;background-color: blue;
width: 75%;
}
Its not the problem of position:fixed. Just avoid calc function. That too like calc(100% - 25px). I'm not sure how browser is calculating, but your code should not depend on it, I feel. Developer/Designer should design all the components width/height/position manually, so everything works out well.
Since an element with a fixed position doesn't look at its parents width when it's given a percentage width, you will need to adjust the width in the calc, so that it has accounted for the 25px margin. What I've done to the code below is first get the pagewidth - 25px, then divide it by 4 to get 25%
#redFixedDiv{
height: 100px; background-color: red;
width: calc((100% - 25px) / 4);
position: fixed;
}
I have an element with 100% height. If there are a lot of blocks, then they go beyond it.
jsfiddle example: http://jsfiddle.net/yPqKa/
How to fix it?
Thanks in advance.
CSS:
html, body {
height: 100%;
width: 100%;
}
.content-background {
background-color: #000;
height: 100%;
width: 100%;
}
.content {
background-color: #eee;
height: 50px;
width: 100%;
margin-top: 60px;
}
Set a min-height on the body :
html {
height: 100%;
width: 100%;
}
body{
min-height:100%;
}
DEMO
This will allow the body to adapt it's height to the overflowing content.
The problem is that you have set the height of the html and body elements to 100% of their container, which restricts them to be smaller than the elements they contain. If you remove the height: 100%; from the second line, it will work.
This is my admin panel and I want to divide it into 2 columns with divs. The left div is a menu and has this style set:
#menu_left{
position: fixed;
float: left;
width: 300px;
height: 100%;
top: 0;
left: 0;
background: #666;
color: white;
}
The right one is the content and has this style:
#content{
text-wrap: unrestricted;
float:left;
width: 100%;
left: 300px;
}
It doesn't work as it should work, I want it to wrap the text, but it doesn't.
Tell me also please, if there is any faulty style setting.
Oh the html:
<body>
<div id="menu_left">
<h1>Menu</h1> <hr />
</div>
<div id="content"></div>
</body>
You have width 100% on content, which makes it stick out 300px to the right of the window, because of the width of #menu_left. You should make this some pixel value, or change #menu_left to a % width, say 20%, then content could be 80% and they would fit nicely.
Plus you should remove left: 300px; from #content, it will already go where you want it to because of the float: left;.
Just clear out these lines and you should be good to go.
#menu_left{
position: fixed; <--don't need
float: left;
width: 300px;
height: 100%;
top: 0; <--don't need
left: 0; <--don't need
background: #666;
color: white;
}
#content{
text-wrap: unrestricted; <--don't need (you really want to break letters in the same word?)
float:left;
width: 100%;
left: 300px; <--don't need
}
Using a pre-made system makes a lot more sense than trying to start from scratch. I would recommend using a css system like grid960 http://960.gs/
For example this div is displayed:
<div class="circle"></div
.circle {
width: 300px;
height: 300px;
background: red;
border-radius: 50%;
}
but when width and height are in % it collapses:
.circle {
width: 30%;
height: 30%;
background: red;
border-radius: 50%;
}
Is there a way to get it displayed?
This is because the div has no height. width: 30%; will always make the div 30% width of the parent (<body>, in this case), which is what you want. However, height behaves a little differently.
You need to specify a 100% height for body and html like so:
html,
body {
height: 100%;
}
Working Fiddle
You can read why height: 100%; behaves like that here
You need to declare a hard width/height somewhere, in this example I put a hard width/height on a container div:
http://jsfiddle.net/exrNm/1/
<div class="con">
<div class="circle"></div
</div>
.con{
width:300px;
height:300px
}
.circle {
width: 30%;
height: 30%;
background: red;
border-radius: 50%;
}
You could easily set a hard width somewhere up the parent chain. The % needs a hard value to calculate against.