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?
Related
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:
Setting the width of inline elements
(7 answers)
How to remove the space between inline/inline-block elements?
(41 answers)
How to make an element width: 100% minus padding?
(15 answers)
Closed 2 years ago.
How do i exactly use the parent's element width in css? I know this is a basic question but i'm using width: 50% on css expecting that the width would be 50% of the parent but instead it uses less than 50%.
In this example, i colored the parent as green so i could see the width and i was expecting each tab to be distributed along the green block.
Link to the example: https://jsfiddle.net/zfw81ojq/6/
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BPO Services</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="content" id="main-content" onclick="appendEl()">
<div class="tab-selector">
<div class="tablinks" onclick="openForm()"><h2>1st Tab</h2></div>
<div class="tablinks" onclick="openForm()"><h2>2nd Tab</h2></div>
</div>
</div>
</body>
</html>
.content {
position: absolute;
width: 60%;
padding: 120px auto 120px;
top: 30%;
margin-left: 20%;
}
.content .tab-selector {
height: 25px;
background-color: green;
}
.content .tab-selector .tablinks {
display: inline;
padding: 20px;
width: 50%;
text-align: center;
}
.content .tab-selector .tablinks h2 {
font-size: 20px;
display: inline;
}
This question already has answers here:
How to center a "position: absolute" element
(31 answers)
How can I center an absolutely positioned element in a div?
(37 answers)
Closed 3 years ago.
I am trying to center a image within a container.
According to what I've understood, setting a container's position as "relative" that has a property of text-align set to center should
center block-level elements vertically that has their position
property set to absolute. However, why isn't this the case with my
code?
.first-container {
background-color: yellow;
height: 100%;
position: relative;
text-align: center;
width: 100%;
}
.mountain {
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">
<link rel="stylesheet" href="style.css">
<title>Playground</title>
</head>
<body>
<div class="first-container">
<img class="mountain" src="images/mountain.png" alt="">
</div>
<div class="second-container">
</div>
<div class="third-container">
</div>
</body>
</html>
I expected that the mountain image would be at the center of the first container that I set the background color to yellow for ease of distinction.
When you use position: absolute on an image in a container with position: relative, your image is at the center of your container. Or, more specifically, the top-left pixel of your image is as the center.
In order to center the image so that the center of the image is in the center of the containing element, you want to set a margin-left of negative half of the image's width. This can be seen in the following, with an image that's 100px wide, with margin-left: -50px:
.first-container {
background-color: yellow;
height: 100%;
position: relative;
text-align: center;
width: 100%;
}
.mountain {
position: absolute;
margin-left: -50px;
}
<div class="first-container">
<img class="mountain" src="https://placehold.it/100" alt="">
</div>
And assuming you set the width on the image itself, you can actually make use of a combination of CSS variables and calc() in order to determine this margin, with width: var(--image-width) and margin-left: calc(var(--image-width) / -2) on the image.
:root {
--image-width: 100px;
}
.first-container {
background-color: yellow;
height: 100%;
position: relative;
text-align: center;
width: 100%;
}
.mountain {
position: absolute;
width: var(--image-width);
margin-left: calc(var(--image-width) / -2);
}
<div class="first-container">
<img class="mountain" src="https://placehold.it/100" alt="">
</div>
your code is right but has a little bit bug here, you need to set height property to some pixels then you can see the image. For example:
.first-container {
background-color: yellow;
height: 400px;
position: relative;
text-align: center;
width: 100%;
border: 1px solid black;
}
added
left: 50%;
transform: translateX(-50%);
to .mountain. Hope this helps you. Thanks
.first-container {
background-color: yellow;
height: 100%;
position: relative;
width: 100%;
}
.mountain {
left: 50%;
transform: translateX(-50%);
position: absolute;
height: 100px;
width: 100px;
}
<!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">
<link rel="stylesheet" href="style.css">
<title>Playground</title>
</head>
<body>
<div class="first-container">
<img class="mountain"src="https://upload.wikimedia.org/wikipedia/commons/4/4e/Artesonraju3.jpg" alt="">
</div>
<div class="second-container">
</div>
<div class="third-container">
</div>
</body>
</html>
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
height: 100% or min-height: 100% for html and body elements?
(2 answers)
Closed 4 years ago.
The question seems simple enough. Like a good little nerd I've done my research. Everything that I've found says that for something to have height: 100% every nested parent element must have a height for the child div to fill up. And that's exactly what I have.
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div id="content"></div>
</body>
</html>
That's literally all my HTML. I JUST started this project, which is part of the reason I'm so bewildered. My CSS looks like this:
html, body {
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
}
#content {
width: 100%;
height: 100%;
background-color: lightcoral;
}
That's it. That's all my code. The background color of #content is exclusively so I can see the space it takes up. If I add text in the div or change its height to a pixel value in the CSS, the color shows up. If I switch it back to this, it disappears. Additionally, I'm working in Chrome and when I mouse over source in the Elements tab of the dev tools, both html and body are very clearly the height of the window. When I mouse over the #content div, I can see the style in the dev tools where it says height: 100%, but the height is 0px. I'm beyond perplexed. Any ideas?
In the body elementy, you need a "real" heightsetting - min-height: 100%; isn't sufficient as a reference for a relative child element height setting. So change min-height: 100%; to height: 100%; there.
html, body {
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
#content {
width: 100%;
height: 100%;
background-color: lightcoral;
}
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div id="content"></div>
</body>
</html>
P.S.: Your closing <body> tag was lacking the / character - I changed that to </body> in your code
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>