This question already has answers here:
CSS – why doesn’t percentage height work? [duplicate]
(6 answers)
Closed 5 years ago.
I am having trouble with divs and percentages. I do not understand how to expand or set the divs so it would be the full size of the screen. It is stuck at the top of the browser when I view it. What do I do?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BasicArchitect</title>
<link rel="stylesheet" type="text/css" href="style.css"
</head>
<body>
<div id="container">
<div class="header">
</div>
</div>
</body>
</html>
CSS
body{
height:100%;
width:100%;
margin: 0;
padding: 0;
}
#container{
height:90%;
width:100%;
margin:auto;
background-color:white;
border-style: solid;
}
.header{
height:50%;
margin:auto;
background-color: red;
border-style: dashed;
}
Sizing the body to height: 100% doesn't really do anything unless if you set html's height to 100% as well. The measurement you are looking for is Viewport Height, or vh for short.
You want to replace body { height: 100% } with body { height: 100vh }
Aside from percentages, you can use viewport units like vh and vw
body {
margin: 0;
padding: 0;
}
#container {
height: 90vh;
margin: auto;
background-color: white;
border-style: solid;
}
.header {
height: 50vh;
margin: auto;
background-color: red;
border-style: dashed;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BasicArchitect</title>
<link rel="stylesheet" type="text/css" href="style.css" </head>
<body>
<div id="container">
<div class="header">
</div>
</div>
</body>
</html>
Related
I can't understand why this input field with margin (at all sides) is not fitting well within that div. I was hoping to see the input with the right margin being shown.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>CSS Tests</title>
</head>
<body>
<div class="div2">
<input type="Foobar">
</div>
</body>
</html>
body {
margin: 0;
}
.div2 {
width: 100%;
height: 100px;
background-color:indianred;
}
.div2 input {
width: 100%;
margin: 10px;
box-sizing: border-box;
}
Width 100% will set the width to the available space, which in this case is the width of the parent div. Try setting the width to width: calc(100% - 20px); (subtract the margin out).
here is a fiddle link to demonstrate https://jsfiddle.net/2vcokm6x/
The problem is that your width: 100% on the input element does not account for the margin being set. To work around this, you need to subtract 20px (for both the left and right margin) from the width. This can be achieved with calc(), as seen in the following:
body {
margin: 0;
}
.div2 {
width: 100%;
height: 100px;
background-color: indianred;
}
.div2 input {
width: calc(100% - 20px);
margin: 10px;
box-sizing: border-box;
}
<body>
<div class="div2">
<input type="Foobar">
</div>
</body>
This question already has answers here:
How to remove margin space around body or clear default css styles
(7 answers)
Removing body margin in CSS
(10 answers)
Full screen width div area
(3 answers)
Div not 100% width of browser
(4 answers)
css 100% width div not taking up full width of parent
(3 answers)
Closed 1 year ago.
<!DOCTYPE html>
<html>
<head>
<title>Functions</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1">
</head>
main body
<div style="background-color: white; width: 100%; height: 80px; padding: 0px; margin: 0px;">
I want to make this div use 100% of width of the screen
</body>
</html>
It's default 8px body margin.
body {margin: 0;}
You'll need to remove any padding and margins that were auto-applied to the <html> and <body> tags by default, something some browsers do. Once you remove that, your element will display full-width:
html, body { margin: 0; padding: 0; }
body { background-color: red; }
div { background-color: #fff; }
<!DOCTYPE html>
<html>
<head>
<title>Functions</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1">
</head>
<div style="background-color: white; width: 100%; height: 80px; padding: 0px; margin: 0px;"></div>
</body>
</html>
You were almost there, just had to remove default margin and padding from the body tag it self and everything else would have fit in.
body {
margin :0;
background-color: red;
}
div {
background-color: white; width: 100%; height: 80px;
}
<!DOCTYPE html>
<html>
<head>
<title>Functions</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div>I am div</div>
</body>
</html>
This question already has answers here:
Position absolute but relative to parent
(5 answers)
Percentage Height HTML 5/CSS
(7 answers)
Maintain aspect ratio of div but fill screen width and height in CSS?
(9 answers)
Closed 3 years ago.
I have a layout like this:
body {
color: white;
height: 100%;
width: 100%;
background: red;
}
#interaktiivne-container {
height: 100%;
width: 100%;
overflow: hidden;
background: blue;
}
#interaktiivne-videowrapper:after {
height: 0;
overflow: hidden;
padding-top: 56.25%;
position: relative;
background-color: brown;
}
#interaktiivne-videowrapper>div {
overflow: hidden;
background: black;
}
#interaktiivne-videowrapper>div>video {
top: 0;
width: 100%;
height: 100%;
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Interaktiivne</title>
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="interaktiivne-container">
<div id="interaktiivne-videowrapper">
<div>
<video autoplay src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4"></video>
</div>
</div>
</div>
</body>
</html>
And this gives me the desired width for the video. Problem now is, that in some content cases, I want to resize the video element itself to 200%. but this MUST NOT make the container div's expand and the overflow MUST STAY HIDDEN.. the code currently, sadly does do it, overflow is not hidden :( Any ideas?
i made a new layout but there are sidebands or sidelines(i mean the scroll lines "when too much content" and you have to scroll a lot" but this side line is on the bottom in google chrome) appears at full viewport dont know why does it happens. if i change the wrap width from 100vw to 90 there will be white space on the right side which is not good.
Here is the image:
And here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="wrap">
<div class="el2">header</div>
<div class="el1">left</div>
<div class="el3">
<div class="el5">pakk1</div>
<div class="el6">pakk1</div>
phakk
</div>
<div class="el4">footer</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
.wrap {
width: 100vw;
height: 100vh;
background: grey;
}
.el2 {
width: 100vw;
height: 30vh;
background: #C2FF76;
}
.el1 {
width: 20vw;
height: 70vh;
background: blue;
float:left;
}
.el3 {
float:left;
width: 80vw;
height: 70vh;
background: red;
}
.el4 {
width: 100vw;
height: 13vh;
background: purple;
float:left;
}
.el5 {
width: 30vw;
height: 13vh;
background: green;
float:left;
}
.el6 {
width: 40vw;
height: 13vh;
background: green;
float:right;
}
If you hide the overflow on your top-most container this issue will go away.
.wrap {
overflow: hidden;
}
It's good to figure out why you have an overflow though so you can fix the underlying issue.
https://css-tricks.com/findingfixing-unintended-body-overflow/
Note: you can also only change the overflow for the X and Y axis
https://css-tricks.com/almanac/properties/o/overflow/
Bootstrap uses negative side margins on some elements, that's what causes your problem.
Just change all the vw values to % values (same numeric values) - these consider the "real width" of the parent elements.
https://codepen.io/anon/pen/MopXrq
Actually the problem was some of the boxes height : vh exceeded the limit.
I am trying create a simple single page site that works on mobile. Ideally, I'd like each section of the site to be 100% of the browser height. This is the page:
http://codepen.io/juanp83/pen/EgjBwK
and here's the code:
body, html {
height: 100%;
width: 100%;
}
.section {
height: 100%;
position: relative;
}
.one, .three {
background-color: #666;
}
.two {
background-color: #222;
}
.bottom {
position: absolute;
bottom: 20px;
right: 0px;
left: 0px;
}
p {
color: #fff;
text-align: center;
}
.nav {
position: fixed;
top: 0px;
height: 50px;
width: 100%;
background-color: #fff;
z-index: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<!--nav-->
<div class="nav"></div>
<!--Section1-->
<div class="section one">
<div class ="bottom"><p>By Juan Portillo</p></div>
</div>
<!--Section2-->
<div class="section two">
</div>
<!--Section3-->
<div class="section three">
</div>
</body>
</html>
It works great on my desktop. But I tried it on my iPhone and the first section takes up the entire height of the webpage, not just the height of the browser, so it ends up "hiding" the other sections.
I've done several searches here on stack overflow as well as some other sites but I just can't find a fix. Any help would be greatly appreciated.
.section {
height: 100vh;
}
Set the height to your viewport height using vh.
Reference: https://snook.ca/archives/html_and_css/vm-vh-units
height: 100vh
that should do the trick
vh = viewport height