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>
Related
There are a lot of similar questions already asked. But I still couldn't figure out the problem.
When viewing the site on mobile there is this unwanted white space, desktop version does not have this problem.
Somehow, the unwanted white space is only present when width of website is greater than viewport(again, only on mobile).
The code is below.
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
border: 2px dashed rebeccapurple;
}
html,
body {
min-height: 100vh;
width: fit-content;
}
.myDiv {
height: 2000px;
width: 2000px;
border: 2px dashed tomato;
margin: 25px;
}
<!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">
<title>Document</title>
</head>
<body>
<div class="myDiv"></div>
</body>
</html>
Try set .div1 width to 1000px on style
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 2 years ago.
Here is my HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header>
<div>KK</div>
</header>
</body>
</html>
Here is the css code:
html{
margin: 0;
font-size: 20px;
}
div{
margin: 0;
padding: 0;
}
header{
background-color: cornsilk;
width: 100%;
padding: 0;
margin: 0;
}
I used zero padding and zero margin everywhere as I heard that header by default has indentations. But nothing seems to work(
thank you for your answers in advance!!
Problem was solved by adding to the css code
body{margin:0}
Your <body> has a default margin of 8 pixels.
just add to the CSS code:
body{
margin: 0;
}
Even better would be:
* {
margin: 0;
padding: 0;
}
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?
So I can't change the size of my nav bar. I can't move it to the center either. Also I can scroll my page down and to the sides even though I set the body width and height to 100vw and 100vh. Can someone help?
My Code:
body {
background-color: black;
width: 100vw;
height: 100vh;
display: inline block;
}
h1 {
font-family: 'Anton', sans-serif;
color: white;
font-size: 108px;
text-align: center;
}
div {
width: 2000px;
height: 500px;
display: inline block;
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="KinoWorld homepage" content="html/css file">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Stuff</h1>
<div class="search">
<input type="text" placeholder="Search..">
</div>
</body>
</html>
Just because you set the body to a width of 100vw doesn't limit child elements to 100vw. You'll either want to set overflow-x: hidden on the body, or better yet, use appropriate styling on child elements.
For your div, try to avoid using pixel widths, but if you must, set a max-width: 100%; so they won't overflow their parent. You also have a typo display: inline block; needs to by hyphenated. Though you don't need to make this element an inline-block;, it's fine as a block level element.
Also, the body by default will be 100vw, you can set that as a max-width value which will aide if it's framed in (like with the snippets below), but usually it isn't necessary.
If you have a small page, and want it to be "full page no matter what", set it's min-height: 100vh, there's rarely a reason to limit it's total height to 100vh.
The simplest way to center an inline or inline-block element (your search input) is to set text-align: center; on the parent. Also note that semantically, you should use <input type="search"> for search form elements.
* { box-sizing: border-box; }
body {
background-color: black;
max-width: 100vw;
min-height: 100vh;
display: inline block;
margin: 0;
}
h1 {
font-family: 'Anton', sans-serif;
color: white;
font-size: 108px;
text-align: center;
}
div {
max-width: 100%;
width: 2000px;
height: 500px;
text-align: center;
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="KinoWorld homepage" content="html/css file">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Stuff</h1>
<div class="search">
<input type="search" placeholder="Search..">
</div>
</body>
</html>
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>