If I set width of the "div" element to % it works fine, but if I set the height to a % I get nothing. Only if I specify the height in px or em or something does it work:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
div {
background-color: aqua;
height: 25%;
width: 25%;
float: left;
}
</style>
<body>
<div></div>
</body>
</html>
This is confusing me. Thanks.
<style>
body{
height: 100vh;
width: 100vw;
}
div {
background-color: aqua;
height: 25%;
width: 25%;
float: left;
}
</style>
When you set width or height with %, You have to check it's parent tag.
For example,
.parent{
width: 200px;
height: 200px;
}
.children{
width: 50%;
height: 50%;
}
.children 's height and width is 100px.
Let's see another exmaple.
.parent{
}
.children{
width: 50%;
height: 50%;
}
.children's height and width is 0px.
because it's parent doesn't have width and height.
the dive will get 25% of its parent height and width so if you didn't style body to have an special height or width it most be 0px in you'r case add some height to body and it will get styled
body {
height:100%;
padding:0;
margin:0;
}
Related
I'd like to set the div height using percentages that do not depend on items in it.
I got a fixed header on the top of the screen and a centered div. But set height in percentages does not work. It enlarges only if I add some items in there.
Please help.
I have this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lol</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="conteiner">
<header>
<p>header</p>
</header>
<div id="main">
<p>main info</p>
</div>
</div>
</body>
</html>
And this CSS.
html{
width: 100%;
height: 100%;
}
body{
overflow: hidden;
margin: 0;
width: 100%;
height: 100%;
}
header{
position: fixed;
top: 0px;
width: 100%;
height: 10%;
border: solid red 1px;
}
#main{
display: block;
width: 65%;
height: 80%;
border: solid green 1px;
margin: 8% auto 0 auto;
}
You forgot to make it's parent 100% height too.
#conteiner has automatic height by default because its div block. And default height is height of its children. If parent's height isn't set manually, children height in percents are ignoring by browser
#conteiner {
height: 100%;
}
at your style file you have to write style for container div code like
#container{
height:100%;
}
am sure there is a really simple solution to this but I can't seem to get it right. I need a margin-top of 50px on my form for my header but this seems to push the bottom arrow button of the scrollbar off the page. The only element I want to scroll is the contents of wrapper (hence the overflow-y: hidden on the body). Any thoughts?
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{
overflow-y: hidden;
}
#wrapper
{
height: 100%;
left: 225px;
margin-top: 50px;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
width: 300px;
background-color: green;
}
#content
{
height: 2000px;
background-color: red;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
</div>
</div>
</body>
</html>
You set height: 100% for #wrapper and plus margin-top: 50px; will be 100% + 50px. Set your #wrapper less height and everything will be fine. Or calculate height with calc. Like this:
#wrapper {
height: calc(100% - 50px);
}
basically you need to se the height of your #wrapper to 100% minus the margin top with something like this:
#wrapper {
height: calc(100% - 50px);
}
JSFIDDLE
I can't resize an image in css/html. Ican resize it in px but not in %. I already tried min-height, min-widht. Here's my code I can't resize it.
body{
margin: 0;
}
#top{
background-color: #53FF40;
width: 100%;
height: 50%;
}
#bottom{
background-color: #FF5757;
width: 100%;
height: 50%;
}
.img-yes{
width: 25%;
height: 25%;
}
<!DOCTYPE html>
<html>
<head>
<title>DoYouLoveDogs</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<body>
<div id="top">
<div class="img-yes">
<img class="img-yes" src="img/yes.png">
</div>
</div>
<div id="bottom">
</div>
<script src="js/jquery.js"></script>
<script src="js/button.js"></script>
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>
</html>
Give display: block?
.img-yes {
display: block;
width: 25%;
height: 25%;
}
Add
.img-yes
{
width: 100%;
height: auto;
}
fiddle
First of all you need to set a size in pixels for outer div of image. Then resize image with percentage.
.outerdiv{
width:200px;
height:200px;
}
.img-yes{
width: 50%;
height:30%;
}
But if you only want to resize image you can only give width in percentage and height will automatically set according to width.
I just copy paste you code in to notepad (change internal css to inline css and change image path) and execute it. It's working properly. When i increase the width, image resize according to width.
.img-yes {
height: 40% !important;
margin: 5px 28px 22px 82px;
width: 50% !important;
}
I have this example layout.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {
padding: 0;
min-width: 960px;
height: 500px;
border: 1px solid red
}
.boxed-layout .wrapper {
width: 1000px;
background: #FFF;
margin: 0 auto;
}
.inner {
width: 960px;
position: relative;
margin: 0 auto; /* main width */
}
.responsive .inner {
max-width: 960px;
width: auto;
}
</style>
</head>
<body>
<div class="inner wrapper"></div>
</body>
</html>
Now I need to add a div full width into wrapper. So i tried this way
.banner {
position: relative;
left: -100px;
max-width: 2000px;
width: auto;
border: 1px solid green;
height: 400px;
}
and
<div class="banner"></div>
but does not work well.
Is it correct to use relative positioning with negative left to move it to zero?
If I use width: 2000px instead of auto, appears the horizontal scroll bar
So, how can I have the full width and responsive?
You have to remove position:relative from your wrapper container (i.e. inner class contrainer). Then for banner use following markup:
HTML
<div class="banner">
<div class="banner-inner"></div>
</div>
CSS
.banner {
position: absolute;
left: 0;
right: 0;
}
.banner-inner {
position:relative;
margin:0 auto;
max-width: 2000px;
}
If you dont want to remove position:relative for some reason then you have to use javascript/jQuery as follows (keep markup same as above):
var marg = ($(window).width()-960)/2;
$('.banner').css({'left':-marg+'px','right':-marg+'px'});
Just give width: 100% for your div inside the wrapper. Sounds good?
.banner { border:1px solid green;height:400px;}
do not give width it's automatically take full width
According to the accepted answer, the OP's actual problem is that there is one 960px width container & there is a child div which needs to be 100% of body (not the parent) as per screen size. This as as easy as
.banner {
width: 100vw;
}
No need to change any other original properties.
Viewport-percentage lengths defined a length relatively to the size of viewport, that is the visible portion of the document.
1vw =1/100th of the width of the viewport
-- MDN
I would like to have a html/css layout, which has a div#header and div#body as direct children of body tag. I want div#body to fill the remaining space and I do not want to use JavaScript. I know it is possible if you know the exact height of the div#header. But i do not want to fix that.
example with fixed div#header
<head>
<style>
html, body {
position: relative;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
div {
width: 100%;
}
#header {
position: relative;
<!-- i want to remove height because i want the header to size itself
dependent on it's content -->
height: 100px;
background-color: red;
}
#body {
<!-- I want to make the body position relative and set top to 0
but that does not work as expected.-->
position: absolute;
top: 100px;
margin: 0;
bottom: 0;
background-color: green;
height: auto;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="body">body</div>
</body>
Please let me know if there is any alternative which uses divs and css.
Many thanks in advance!
You can set the min-height of the body div to 100% to stretch out the body div (I've changed the body bg color to make it more obvious).
However, I'm not 100% clear on your second requirement (<!-- I want to make the body position relative and set top to 0 but that does not work as expected.-->)
Fiddle here
Here is the updated answer: what i have done is to make the parent html and body to display as a table and other divs to have properties of table row and this css will make them capture the whole screen area.
Now i have given the header height of auto.
and
#body is inheriting the other space.
Try this: http://jsbin.com/ezozeb/5/edit
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display:table;
}
#header {
background-color: red;
display:table-row;
height:auto;
}
#body {
background-color: green;
display:table-row;
height:inherit;
}
First of all, delete the height and width of the body element.
You can use page wrappers to make that happen:
#PageWrapper
{
width: 844px;
background-color: ##4628C4;
margin: auto;
}
#PageContentWrapper
{
width: 659px;
float: left;
background-color: #e1e1e1;
min-height: 500px;
padding: 10px;
}
The pagecontentwrapper sets the minimum height to 500px.
In html you can then assign these identifiers to the body and divs
<html>
<head>
<link...>
</head>
<body id="PageWrapper">
<div id="PageContentWrapper">
Content of the body
</div>
</body>
</html>
If you want to make a div scrollable, you should define a height and/or width and add this to the css:
overflow-x:auto; <!--horizontal-->
overflow-y:auto; <!--vertical-->
For example, if you set the pagewrappers height to 1000 (not the min-heigt) and overflow-y: auto; then the scrollbars will appear when content get out of bounds.
If you want to make the header always on top, you should apply something like this:
#PageWrapper
{
width: 844px;
background-color: ##4628C4;
margin: auto;
}
#Header
{
background-color:#aaaaaa;
width: 844px;
height: 240px;
}
#PageContentWrapper
{
width: 659px;
height: 700px;
overflow-y: auto;
float: left;
background-color: #e1e1e1;
padding: 10px;
}
and in html
<html>
<head>
<link...>
</head>
<body id="PageWrapper">
<div id=Header>
Headertext
</div>
<div id="PageContentWrapper">
Content of the body
</div>
</body>
</html>