height 100% is working in some divs and in others doesnt(container).
Height 100% works in Menu_left div but in container doesnt.
I don't know why it didn't work to set height 100% in that div.
here is my html code:
<body>
<div class="All clearfix">
<div class="Menu_left">Menu</div>
<div class="Container_right">Container</div>
</div>
</body>
My css:
html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,q,s,strong,sub,sup,tt,var,b,u,i,center,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,footer,header,menu,section{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}
.clearfix:after {
visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
html{
padding:0;
margin:0;
height:100%;
min-height:100%;
}
body{
padding:0;
margin:0;
height:100%;
min-height:100%;
-webkit-background-size:cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
}
.All{
width:100%;
height:auto;
min-height:100%;
position:relative;
overflow:hidden;
background-color:rgb(35,31,32) ;
}
.Menu_left_float{
float:left;
background:blue;
width:340px;
height:100%;
}
.Menu_left{
position:fixed;
top:0px;
left:0px;
width:340px;
height:100%;
background-color:#F0F;
}
.Container_right{
position:relative;
background-color:#00F;
min-height:100%;!important
height:100%;
margin:0 0 0 340px;
}
http://jsbin.com/jezoqume/1/edit
give .All height of 1px and it will work.
cheers.
On adding position:fixed instead of position:relative, it is working.
http://jsfiddle.net/SVhm6/
.Container_right{
/*position:relative;*/
position:fixed;
background-color:#00F;
min-height:100%;!important
height:100%;
margin:0 0 0 340px;
}
Your position:fixed is causing this. When you applied a fixed position, you took ownership of that entire side.
get rid of the fixed position and you'll see. And for more fun, give the other div a fixed position and you'll see that doing it instead!
It's all in the position bud.
So either make them both fixed, or use height auto with relative position. You will be fine either way.
Related
Background acts as expected without transform:scale
after adding transform:scale value unwanted parallax effect appears: http://codepen.io/fekla/pen/VmqPZa (scroll down).
<div class="holder">
<div class="image"></div>
</div>
html,body {
margin:0px;
padding:0px;
height:100%;
width:100%;
}
.holder {
width:100%;
height:100%;
background-color:black;
overflow: hidden;
}
.image {
width:100%;
height:100vh;
background-image: url(http://lorempixel.com/output/nature-q-c-884-338-5.jpg);
background-attachment: fixed;
background-size: cover;
background-position: center;
transform: scale(1.25);
}
seems to be a known Webkit bug:
https://bugs.chromium.org/p/chromium/issues/detail?id=20574
P.S. also there seems to be little interest in actually fixing it
I want the first picture to be aligned to the right bored of the black div, but I can't move the picture "Char" from where it is.
http://www.charlestonshop.it/homepageteo.html
<style type="text/css">
html, body {
width:100%;
height:100%;
margin:0;
}
div#container {
height:100%;
}
div#container div {
width:50%;
height:100%;
float:left;
background-repeat:no-repeat;
background-size:contain;
}
div#container div#left {
/* background-image:url('http://www.charlestonshop.it/charback9.jpg');*/
background-position: right;
background-color: black;
}
div#container div#right {
/* background-image:url('http://www.charlestonshop.it/charback10.jpg');*/
background-position: left;
background-color: white;
}
.charleft img{
max-width:100% !important;
height:auto;
display:block;
}
.charright img{
max-width:100% !important;
height:auto;
display:block;
float:right;
}
</style>
Add the below to your css, if you already have rules in place- add the additional styles as outline below:
#left{
position:relative; /* have a reference point for child positioning */
}
.charleft img{
position:absolute; /* position absolutely */
right:0; /* position on the right hand side of the parent, #left */
}
The benefit of this as opposed to using float, is you wont have to either clear the float, or accommodate for any changes it may later inflict on your layout.
You have to add float: right to .charleft div which contains the image
.charleft{
float: right;
}
it's very easy to do, just add this to your css code.
#left > .charleft{
float: right;
}
That's all.
I have a 'body' with 40px of margin.
Moreover, I want to add a div with 100% in height and 100% in weight with the 'static position'.
My problem is that my 'div' is go beyond the 'body' !
I want my div fills the 'body' (respecting with the margin of it : 40px).
How can I solve this problem ?
Thks
MY JS FIDDLE
body {
background:pink;
margin:40px;
}
.contenuWorks {
height:100%;
width: 100% ;
background:red;
position:absolute;
}
If you use an absolute positioning you can just set coordinates of the div.
Fiddle: http://jsfiddle.net/EQEPY/
.contenuWorks {
left: 40px;
right: 40px;
top: 40px;
bottom: 40px;
background:red;
position:absolute;
}
if you choose a box-model with box-sizing, you can turn the problem into none.
First trigger the box-model with : box-sizing:border-box; http://www.w3.org/TR/css3-ui/#box-sizing0 / http://quirksmode.org/css/user-interface/boxsizing.html
Then turn the margin of body into padding in html.
If you choose : border-box it includes border and padding into the size set in CSS.
<div>
box-sizing and use
<code>height: 100%; width : 100%;</code>
without headhakes.
</div>
html, body, div {
-moz-box-sizing:border-box;
box-sizing:border-box;
height:100%;
width:100%;
border:solid;
margin:0;
}
html {
padding:40px;
border:solid red;
}
body {
border:solid blue;
}
div{
border:solid yellow;
background:pink;
}
http://codepen.io/gc-nomade/pen/Fjqzn
Fiddle: http://jsfiddle.net/sbDSy/2/
Why not apply padding to the div instead of margin to the body:
.contenuWorks {
height:100%;
width: 100% ;
padding:40px;
background:red;
position:absolute;
}
body {
margin:0;
padding:0;
}
I'm trying to create a HTML CSS Layout using div tag.
Code here
Now it display a vertical bar. I want to avoid this vertical bar, and would like to display only if the content is big.
May you wnt an Sticky Footer than put your footer outside the #container.
Check this http://jsbin.com/ujemaq/17
EDIT:
Ok your actual problem arises with the height ambiguity, see these line:
#container{
min-height: 100%;
width:100%;
height:100%; /* this causes container to a 100% height of body*/
}
#header{
width:100%;
height:55px; /* this takes 55px of container height*/
/*border:2px solid;*/
}
#menu{
width:100%;
height:20px; /* this takes another 20px of container height*/
/*border:2px solid;*/
}
#left-nav{
width:20%;
height:100%;
float:left;
/*border:2px solid;*/
}
#content{
height:100%; /*You thinking of getting full height of container but the 75px height is already grabbed by header and menu, so while expanding content to 100% height a vertical scrollbar appears */
/*border:2px solid;*/
}
apply this css
body,html{
height:100%;
}
#container{
min-height: 100%;
width:100%;
height:100%;
}
#header{
width:100%;
height:55px;
/*border:2px solid;*/
}
#menu{
width:100%;
height:20px;
/*border:2px solid;*/
}
#left-nav{
width:20%;
float:left;
/*border:2px solid;*/
}
#content{
height:85%;
/*border:2px solid;*/
}
#footer{
background-color:#FFA500;text-align:center;
}
</style>
Here is the HTML Code:
<div id="header">
</div>
<div id="container">
<div id="leftbar">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
And here is what I want to achieved, even though it's not valid CSS, but I think you will understand my point:
html,body
{
min-width:800px;
max-width:1680px;
width:100%;
height:100%
}
#header
{
width:100%;
height:100px;
background:#CCCCCC url(images/header_bg.gif) repeat-x;
}
#footer
{
width:100%;
height:10px;
}
#container
{
width:100%;
height:100%-100px-10px; /* I want #container to take all the screen height left */
}
#leftbar /*fixed width, the height is always the same as the screen height*/
{
height:100%;
width:200px;
}
#content
{
height:100%;
width:100%-200px; /* take all the screen width left except the leftbar */
overflow:auto;
}
Someone just put this as an example:
http://limpid.nl/lab/css/fixed/header-and-footer
I do not think using <body>padding to exclude the header and footer is a good way to go, because I would like all the scroll bars appear inside the div#content, not for the whole <body> tag.
The normal width of a block element is 100% so all you should need to do is add a margin as appropriate. If I'm understanding your question properly.
Have you considered using position:fixed for the framework elements? Or are you stuck supporing IE6?
the horizontal bit can be achieved quite easily
#content {margin-left:200px;}
#left-bar {float-left;width:100px;}
The vertical bit is trickier as there is no vertical equivalent of float. A close approximation that might work is:
html,body
{
min-width:800px;
max-width:1680px;
width:100%;
height:100%
}
#header
{
width:100%;
height:100px;
background:#CCCCCC url(images/header_bg.gif) repeat-x;
position:absolute;
top:0;
left:0;
}
#footer
{
width:100%;
height:10px;
position:absolute;
bottom:0;
left:0;
}
#container
{
width:100%;
height:100%;
margin-top:100px;
margin-bottom:10px;
}
#leftbar
{
height:100%;
width:200px;
float:left;
}
#content
{
height:100%;
margin-left:200px;
overflow:auto;
}
You could use calc(), e.g.:
#container {
...
height: calc(100% - 100px - 10px);
}
And you could either use margins or fixed positioning to set the position of it to between the header and footer.
As for the scrollbars, just apply overflow: hidden to body and div#container and apply overflow: auto to div#content.