<!DOCTYPE html>
<html>
<head>
<title></title>
<style type='text/css'>
#content{
width: 100%;
height: 100%;
margin-left: -8px;
margin-top: -8px;
}
#topSideContainer{
position: fixed;
z-index: 2;
width: 100%;
height: 60px;
border-bottom: 1px solid grey;
background-color: #3d3b36;
}
#leftSideContainer{
position: fixed;
z-index: 1;
width: 250px;
height: 100%;
border-right: 1px solid grey;
background-color: #3d3b36;
}
#mainContainer{
position: relative;
background-color: #615e57;
width: 100%;
height: 100%;
border: 1px solid grey;
margin-left: 250px;
}
</style>
</head>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id='content'>
<div id='topSideContainer'>
</div>
<div id='leftSideContainer'>
</div>
<div id='mainContainer'>
</div>
</div>
</body>
</html>
I'd like to ask why the div #maincontainer doesnt display with widht/height when they are set to be a 100%? If I switch them to a value, not a % it works perfectly fine...
And I'd also like to ask why do I have to set margin-left on that exact div just to make it 100% visible on the page, but it starts from the top (where the topsidecontainer starts) and not from the leftsidecontainer div as well.
Infos:
Position fixed works as the fixed position for the viewport which leave the space for the content you used (i.e the container of it)
without element inside it all container become 0 heighten (i.e body is 0 in height)
if ones parent's height is 0, then it's 100% height will not works which indicates the height of 100% is relative to it's parent. so, 100% of 0 is 0.
use vw or vh instead of 100% for this purpose. becuse it is relative to screen size.
topSideContainer & leftSideContainer are lost their spaces, so mainContainer starts from 0,0 position
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type='text/css'>
*{
margin:0;
padding:0;
}
#content{
width: 100%;
height: 100%;
}
#topSideContainer{
position: fixed;
z-index: 2;
width: 100%;
height: 60px;
border-bottom: 1px solid grey;
background-color: #3d3b36;
}
#leftSideContainer{
position: fixed;
z-index: 1;
width: 250px;
height: 100%;
border-right: 1px solid grey;
background-color: #3d3b36;
}
#mainContainer{
position: relative;
background-color: #615e57;
width: calc(100vw - 250px);
height: calc(100vh - 60px);
border: 1px solid grey;
left: 248px;
top: 58px;
}
</style>
</head>
<body>
<div id='content'>
<div id='topSideContainer'>
</div>
<div id='leftSideContainer'>
</div>
<div id='mainContainer'>
</div>
</div>
</body>
</html>
% is a relative unit, when you say height:100% you mean i want this element to take the 100% of the height of it's parent.
You want #mainContainer to be have height:100% of it's parent, Well what is that parent ? and what is that parent's height ?
The parent is #content and it is also height:100% of it's parent, Well what is that parent ? and what is that parent's height ?
The parent is <body> and it's height is 0. Why? Because you didn't specify a height for it.
Do you see a pattern forming here ?
height:100% On the other elements work because you set their position to fixed, because of that they become relative to the initial containing block that is being <html>/viewport and <html>/viewport has a height/width (the browser basically)
Note: A position other than static or relative will take the element out of the document flow, meaning it will not affect other elements and there could be overlap
To achieve that layout, we can simply using flexbox if you don't mind changing the html.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
/* propagate the height from the html down to the body then #content */
}
#content {
display: flex;
flex-direction: column;
height: 100%;
}
#topSideContainer {
flex: 0 0 60px;
background-color: red;
}
#bottomSideContainer {
display: flex;
flex: 1;
}
#leftSideContainer {
flex: 0 0 250px;
background-color: orange;
}
#mainContainer {
height: 100%;
flex: 1 0 0;
background-color: pink;
}
<div id="content">
<div id="topSideContainer">
topSideContainer
</div>
<div id="bottomSideContainer">
<div id="leftSideContainer">
leftSideContainer
</div>
<div id="mainContainer">
mainContainer
</div>
</div>
</div>
Or CSS Grid without changing the html
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
#content {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 60px 1fr;
height: 100%;
}
#topSideContainer {
background-color: red;
grid-column: span 2;
}
#leftSideContainer {
background-color: orange;
}
#mainContainer {
background-color: pink;
}
<div id="content">
<div id="topSideContainer">
topSideContainer
</div>
<div id="leftSideContainer">
leftSideContainer
</div>
<div id="mainContainer">
mainContainer
</div>
</div>
Note: If the above code didn't work for you, try to share the link to your website so we can look and analyze your style sheet if you have any forced instructions that stopped the code to work.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type='text/css'>
#content{
width: 100%;
height: 100%;
margin: -8px;
padding: -8px;
}
#topSideContainer{
position: fixed;
z-index: 2;
width: 100%;
height: 60px;
border-bottom: 1px solid grey;
background-color: #3d3b36;
}
#leftSideContainer{
position: fixed;
z-index: 1;
width: 250px;
height: 100%;
border-right: 1px solid grey;
background-color: #3d3b36;
}
#mainContainer{
position: absolute !important;
background-color: #615e57;
max-width: 200% !important;
width: 100% !important;
background: yellow;
height: 100%;
border: 1px solid grey;
}
</style>
</head>
<body>
<div id='content'>
<div id='topSideContainer'>
</div>
<div id='leftSideContainer'>
</div>
<div id='mainContainer'>
</div>
</div>
</body>
</html>
Related
all! I meet a CSS question. The below picture is the layout of my web page. What I want to implement is component A, B and C keeps unchanged in various sizes of screen, and these components have fixed margin and padding. And D has a background image cover its content, and this background image can responsively cover the D component dose not have any blank space. Sorry to my the English, not native spaker.
I implement this layout by using Vuetify and nuxtJS, due to the regulation of the company, I cannot upload the code, but I append the similar work that I did.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.a {
margin: 40px auto;
height: 200px;
background-color: red;
}
.b {
margin: 40px auto;
height: 200px;
background-color: yellow;
}
.c {
margin: 40px auto;
height: 200px;
background-color: blue;
}
.d {
margin-top: 40px;
height: 100%;
background-color: pink;
}
<body>
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
</body>
What I want to implement is that the background colour or image of D component can cover to the end of the screen and without leaving any blank space. And it can also responsively designed.
Then you should give width to your boxes.
.a, .b, .c{
width: 200px;
}
<!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>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.a{
margin: 40px auto;
height: 200px;
background-color: red;
}
.b{
margin: 40px auto;
height: 200px;
background-color: yellow;
}
.c{
margin: 40px auto;
height: 200px;
background-color: blue;
}
.d{
margin-top: 40px;
height: 100%;
background-color: pink;
}
.a, .b, .c{
width: 200px;
</style>
</head>
<body>
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
</body>
</html>
Edit: I just understood what you're trying to do. If you want the d component to fill all the screen you need to position: absolute; it inside a position: relative; element, like your entire page box. Example:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.relative {
position: relative;
}
.a {
margin: 40px auto;
height: 200px;
background-color: red;
}
.b {
margin: 40px auto;
height: 200px;
background-color: yellow;
}
.c {
margin: 40px auto;
height: 200px;
background-color: blue;
}
.a, .b, .c {
width: 300px;
}
.d {
height: 100%;
width: 100%;
background: url('https://via.placeholder.com/150x150');
background-size: cover;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
<body class="relative">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
</body>
I used z-index:-1; to bring the d element behind the other elements. I also used background-size: cover; to make the background image fill all the empty space. background-repeat: no-repeat; to make the image not repeat. Further, you need to use width in the absolute positioned element.
I'm a beginner and I was playing around with css (code given below)
and I set the yellow div to a 1000px and I thought the blue div would automatically
wrap around it given height:100%;
but to my surprise the yellow div seemed to overflow, I tried using the overflow:auto; but it added a scroll bar to prevent the overflow (which is not what I needed)
so is there anyway that the parent blue div always completely wraps around the yellow div no matter if i set it to a 1000px or 100% height using only CSS?
html,
body {
margin: 0;
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
#header {
height: 100px;
background: black;
width: 100%;
position: relative;
}
#rest {
height: 100%;
width: 100%;
background: blue;
position: absolute;
}
#content {
width: 50%;
left: 50%;
transform: translate(-50%, 0%);
background: yellow;
height: 1000px;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header"></div>
<div id="rest">
<div id="content">
</div>
</div>
</body>
</html>
Try like below:
html,
body {
margin: 0;
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
#header {
height: 100px;
background: black;
width: 100%;
position: relative;
}
#rest {
min-height: 100%; /* update here */
width: 100%;
background: blue;
position: absolute;
}
#content {
width: 50%;
margin: auto; /* remove absolute and center with margin */
background: yellow;
height: 1000px;
}
<div id="header"></div>
<div id="rest">
<div id="content">
</div>
</div>
Hy guys.
I have a situation of overlay div inside another div.
Why the main div not fit the height size when i using position relative in a inner div to create a overlay.
See the picture
I cannot use position: absolute because i need the scroll working inside the main div.
See the code:
div.main
{
width: 300px; height: auto;
border: solid 1px black; overflow: auto;
}
div.box1
{
width: 350px; height: 50px; border: solid 1px red;
}
div.box2
{
position: relative; top: -52px; left: 0px; z-index: 1;
width: 350px; height: 50px; border: solid 1px green;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
<div class="box1">box 1</div>
<div class="box2">box 2 - overlay</div>
</div>
</body>
</html>
I can use another css settings but i need to sinc the scroll of the inner divs.
If I understand your question correctly, this is what you need:
div.main
{
width: 300px; height: auto;
border: solid 1px black; overflow: auto;
position: relative;
}
div.box1
{
width: 350px; height: 50px; border: solid 1px red;
}
div.box2
{
position: absolute;
top: 0;
left: 0px;
z-index: 1;
width: 350px;
height: 100%;
background: rgba(0,0,0,0.5);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
<div class="box1">box 1</div>
<div class="box2"></div>
</div>
</body>
</html>
position: relative still keeps the original space free for its element - it only moves the element away from its original position by the top/bottom/left/right values. But the free space is still where it is without those settings. A wrapping container with aut height will act as if the relatively positioned element still were at its original position, causing what you brought up in your question.
So to force a solution as you seem to want it, you'll have to use a fixed height and overflow-y: hidden on your container element.
div.main {
width: 300px;
height: 52px;
border: solid 1px black;
overflow-y: hidden;
}
div.box1 {
width: 350px;
height: 50px;
border: solid 1px red;
}
div.box2 {
position: relative;
top: -52px;
z-index: 1;
width: 350px;
height: 50px;
border: solid 1px green;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
<div class="box1">box 1</div>
<div class="box2">box 2 - overlay</div>
</div>
</body>
</html>
I have a web page index2.html whose height is 100%. It has 3 div: 1st one's height is 20%, 2nd one's height is 70% and 3rd one's height is 10%.
This is its whole HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
html, body {
height: 100%;
}
#div_header {
width: 100%;
height: 20%;
border: 1px solid blue;
}
#div_middle {
width: 100%;
height: 70%;
border: 1px solid red;
}
#div_footer {
width: 100%;
height: 10%;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="div_header">
</div>
<div id="div_middle">
</div>
<div id="div_footer">
</div>
</body>
</html>
When I display the web page on a browser (IE 11 and Chrome), a vertical scroll bar is showing up. I dont understand why there is a vertical scroll bar when the height of page is 100% set and the sum of height of 3 div (20% + 70% + 10%) is also 100%. Why this is happening? How can I fix this issue?
html, body {
height: 100%;
}
#div_header {
width: 100%;
height: 20%;
border: 1px solid blue;
}
#div_middle {
width: 100%;
height: 70%;
border: 1px solid red;
}
#div_footer {
width: 100%;
height: 10%;
border: 1px solid green;
}
<div id="div_header">
</div>
<div id="div_middle">
</div>
<div id="div_footer">
</div>
JSFIDDLE
For two reasons
The body has a default margin that you'd need to eliminate with body {margin:0}
The the other issue is that your borders factor into the size of your elements and increase the height. You can fix this by adding div {box-sizing:border-box}
jsFiddle example
Your problem in your example was the body margin (default in most browsers) and the borders which made the divs width 100% + 2 pixels (border on left and right) and the height was affected the same way.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#div_header {
width: 100%;
height: 20%;
background-color: blue;
}
#div_middle {
width: 100%;
height: 70%;
background-color: red;
}
#div_footer {
width: 100%;
height: 10%;
background-color: green;
}
<div id="div_header">
</div>
<div id="div_middle">
</div>
<div id="div_footer">
</div>
EDIT:
And yes you could also set box-sizing:border-box; in your css to fit the borders in the 100% div. This along with setting margin: 0; to your <body> element would be the correct way to go in fixing your issue.
You can also read about box-sizing here
html, body {
height: 100%;
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
}
#div_header {
width: 100%;
height: 20%;
border: 1px solid blue;
}
#div_middle {
width: 100%;
height: 70%;
border: 1px solid red;
}
#div_footer {
width: 100%;
height: 10%;
border: 1px solid green;
}
<div id="div_header">
</div>
<div id="div_middle">
</div>
<div id="div_footer">
</div>
In my case,
* {
overflow: hidden;
}
This worked.
The reason for the scroll bar is because you are not accounting for the box model. The percentages do not account for margin, or borders. So by adding a 1 px border and not removing the margins, the percentages will make the boxes slightly taller the the view screen.
Try this.
*{
margin: 0;
}
html, body {
height: 100%;
}
#div_header {
width: 100%;
height: 20%;
background-color: #23408;
}
#div_middle {
width: 100%;
height: 70%;
background-color: #444;
}
#div_footer {
width: 100%;
height: 10%;
background-color: #123854;
}
Having a problem with the size of containers outside of a max-width image and the image itself is not taking up to 60% scale. I Can't show the image scaling issue due to not having a dynamic parent. Remove width/height from #container to see the issue. (Please note I am viewing this on a mobile device)
#container {
width: 320px;
height: 480px;
background: white;
border: 1px solid blue;
}
#img-container {
position: relative;
}
#img-container img {
position: absolute;
max-height: 60%;
}
#leftover {
background: yellow;
width: 100%;
height: 100%;
color: white;
}
<html>
<head>
<title>Stackoverflow example</title>
<body>
<div id="container">
<div id="img-container">
<img src="http://placehold.it/1024x1024.png" width="100%">
</div>
<div id="leftover">
<h1>Should only have 40% leftover after the img-container takes up 60%.</h1>
</div>
</div>
</body>
</head>
</html>
Use id="img-container" instead of class="img-container"
Check your CSS.
#img-container = id="img-container"
.img-container = class="img-container"
<div id="img-container">
<image src="http://placehold.it/1024x1024.png" width="100%">
</div>
you can try tweaking the css a little bit as follows:
html,body{
height: 100%
}
.container{
height: 100%;
background: white;
border: 1px solid blue;
}
#img-container{
position: relative;
height: 60%;
}
img{
max-height: 100%
}
#left-over{
background: yellow;
width: 100%;
height: 40%;
color: white;
}
h1{
margin: 0;
}
You could try
#img-container img {
position: absolute;
max-height: 60%;
}