CSS background Image responsively cover the bottom - html

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.

Related

How to completely wrap a div around the child div to avoid overflow?

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>

Why does "width 100% and height: 100%" doesnt work

<!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>

Why vertical scroll bar appearing when height is 100%?

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;
}

html and css placing a non-fixed div between two fixed divs

I'm trying to build a website with 4 main divs (more to come later), 3 of which are fixed, so they dont move when i scroll, and one of them is not fixed. i've been going at it for around 6 hours and 30 minutes straight, googled for possible answers, checked youtube and spent atleast 2 hours looking at stackoverflow posts, none of which really pointed me in the right direction.
design im looking to get:
design
source (html):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="scripts.js"></script>
<title>Title</title>
</head>
<body>
<div class="menu">
</div>
<div class="contact"></div>
<div class="upper"></div>
<div class="main">
<div class="paragraph"></div>
<div class="paragraph"></div>
<div class="paragraph"></div>
<div class="paragraph"></div>
</div>
</body>
</html>
source (css):
/**/
html,body{
height: 100%;
}
body {
background-image: url("background.jpg");
}
div {
margin: 0px;
}
.menu {
background-color:lightgray;
color:black;
width: 200px;
height: 100%;
top:200px;
right: 0;
text-align: center;
position:fixed;
}
.contact {
background-color:lightgray;
color:black;
width: 200px;
height: 100%;
top: 200px;
left: 0;
text-align: center;
position:fixed;
}
.upper {
background-color: black;
width: 100%;
height: 200px;
position:fixed;
top:0px;
left:0px;
}
.main {
background-color: green;
width: 100%;
margin-top:200px;
height: 200vh;
left: ;
}
.paragraph {
background-color: red;
width: 100%;
height: 50vh;
}
i tried changing the width of the .main div, but regardless of what i try the div either goes under the .contact or .menu div
the .paragraph divs go into to the .main div, to hold some text and images once the .main div is properly positioned. the sizes of the divs in my source arent completely like they are in my design yet cus i kept trying thing to maybe solve my problem.
the .js file is currently still empty so i didnt post any source of it.
Any help is welcome: links; sources; comments; if you know something that might point me into the right direction, please post it!
edit: i tried using a wrapper, but that didnt work out too wel for me, i probably did something wrong, i posted the source that looks the most like my design when i open in in browser.
jsfiddle: http://jsfiddle.net/zt1Lyaop/
I ignored your existing code and made a new, HTML5 and responsive way of creating such a layout. I hope this helps you in understanding this concept better
http://jsfiddle.net/7k9vhk4r/2/
The key is using fixed and relative positioning, together with creating offsets based on percentages.
I just changed this:
added margin:0 to body
Change .main rules to :
/*width: 100%;*/
margin: 200px 200px 0;
height: 2000px; /* to make it big */
/*left: ;*/
See the demo FULL PAGE
body {
background-image: url("background.jpg");
margin:0;
}
div {
margin: 0px;
}
.menu {
background-color: lightgray;
color: black;
width: 200px;
height: 100%;
top: 200px;
right: 0;
text-align: center;
position: fixed;
}
.contact {
background-color: lightgray;
color: black;
width: 200px;
height: 100%;
top: 200px;
left: 0;
text-align: center;
position: fixed;
}
.upper {
background-color: black;
width: 100%;
height: 200px;
position: fixed;
top: 0px;
left: 0px;
}
.main {
background-color: green;
/*width: 100%;*/
margin: 200px 200px 0;
height: 2000px;
/*left: ;*/
}
.paragraph {
background-color: red;
width: 100%;
height: 50vh;
}
<div class="menu">
</div>
<div class="contact"></div>
<div class="upper"></div>
<div class="main">
<div class="paragraph"></div>
<div class="paragraph"></div>
<div class="paragraph"></div>
<div class="paragraph"></div>
</div>

How to split page into 4 equal parts?

I want to divide my page into four equal parts, each of same height and width (50-50%).
I don't want to use JavaScript. I want blocks (<div>s) to be resized automatically (and relatively) if the browser window is resized.
I have not worked with CSS for a long time. I've no idea how to handle this.
Demo at http://jsfiddle.net/CRSVU/
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
div {
width: 50%;
height: 50%;
float: left;
}
#div1 {
background: #DDD;
}
#div2 {
background: #AAA;
}
#div3 {
background: #777;
}
#div4 {
background: #444;
}
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
If you want to have control over where they are placed separate from source code order:
html, body { height: 100%; margin: 0; padding: 0 }
div { position: fixed; width: 50%; height: 50% }
#NW { top: 0; left: 0; background: orange }
#NE { top: 0; left: 50%; background: blue }
#SW { top: 50%; left: 0; background: green }
#SE { top: 50%; left: 50%; background: red }
<div id="NW"></div>
<div id="NE"></div>
<div id="SE"></div>
<div id="SW"></div>
JSFiddle demo
Note: if you want padding on your regions, you'll need to set the box-sizing to border-box:
div {
/* ... */
padding: 1em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
…otherwise your "50%" width and height become "50% + 2em", which will lead to visual overlaps.
Some good answers here but just adding an approach that won't be affected by borders and padding:
html, body { width: 100%; height: 100%; padding: 0; margin: 0 }
div { position: absolute; padding: 1em; border: 1px solid #000 }
#nw { background: #f09; top: 0; left: 0; right: 50%; bottom: 50% }
#ne { background: #f90; top: 0; left: 50%; right: 0; bottom: 50% }
#sw { background: #009; top: 50%; left: 0; right: 50%; bottom: 0}
#se { background: #090; top: 50%; left: 50%; right: 0; bottom: 0}
<div id="nw">test</div>
<div id="ne">test</div>
<div id="sw">test</div>
<div id="se">test</div>
I did not want to add style to <body> tag and <html> tag.
.quodrant{
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
.qtop,
.qbottom{
width: 100%;
height: 50vh;
}
.quodrant1,
.quodrant2,
.quodrant3,
.quodrant4{
display: inline;
float: left;
width: 50%;
height: 100%;
}
.quodrant1{
top: 0;
left: 50vh;
background-color: red;
}
.quodrant2{
top: 0;
left: 0;
background-color: yellow;
}
.quodrant3{
top: 50vw;
left: 0;
background-color: blue;
}
.quodrant4{
top: 50vw;
left: 50vh;
background-color: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<div class='quodrant'>
<div class='qtop'>
<div class='quodrant1'></div>
<div class='quodrant2'></div>
</div>
<div class='qbottom'>
<div class='quodrant3'></div>
<div class='quodrant4'></div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Or making it looks nicer.
.quodrant{
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
.qtop,
.qbottom{
width: 96%;
height: 46vh;
}
.quodrant1,
.quodrant2,
.quodrant3,
.quodrant4{
display: inline;
float: left;
width: 46%;
height: 96%;
border-radius: 30px;
margin: 2%;
}
.quodrant1{
background-color: #948be5;
}
.quodrant2{
background-color: #22e235;
}
.quodrant3{
background-color: #086e75;
}
.quodrant4{
background-color: #7cf5f9;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<div class='quodrant'>
<div class='qtop'>
<div class='quodrant1'></div>
<div class='quodrant2'></div>
</div>
<div class='qbottom'>
<div class='quodrant3'></div>
<div class='quodrant4'></div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Similar to other posts, but with an important distinction to make this work inside a div. The simpler answers aren't very copy-paste-able because they directly modify div or draw over the entire page.
The key here is that the containing div dividedbox has relative positioning, allowing it to sit nicely in your document with the other elements, while the quarters within have absolute positioning, giving you vertical/horizontal control inside the containing div.
As a bonus, text is responsively centered in the quarters.
HTML:
<head>
<meta charset="utf-8">
<title>Box model</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="title">Title Bar</h1>
<div id="dividedbox">
<div class="quarter" id="NW">
<p>NW</p>
</div>
<div class="quarter" id="NE">
<p>NE</p>
</div>
<div class="quarter" id="SE">
<p>SE</p>
</div>​
<div class="quarter" id="SW">
<p>SW</p>
</div>
</div>
</body>
</html>
CSS:
html, body { height:95%;} /* Important to make sure your divs have room to grow in the document */
#title { background: lightgreen}
#dividedbox { position: relative; width:100%; height:95%} /* for div growth */
.quarter {position: absolute; width:50%; height:50%; /* gives quarters their size */
display: flex; justify-content: center; align-items: center;} /* centers text */
#NW { top:0; left:0; background:orange; }
#NE { top:0; left:50%; background:lightblue; }
#SW { top:50%; left:0; background:green; }
#SE { top:50%; left:50%; background:red; }
http://jsfiddle.net/og0j2d3v/
try this... obviously you need to set each div to 25%. You then will need to add your content as needed :) Hope that helps.
body {
margin: 0;
padding: 0;
height: 100%;
}
#top_div {
height: 25%;
width: 100%;
background-color: #009900;
margin: auto;
text-align: center;
}
#mid1_div {
height: 25%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
#mid2_div {
height: 25%;
width: 100%;
background-color: #000000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
#bottom_div {
height: 25%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
<div id="top_div">Top- height is 25% of window height</div>
<div id="mid1_div">Middle 1 - height is 25% of window height</div>
<div id="mid2_div">Middle 2 - height is 25% of window height</div>
<div id="bottom_div">Bottom - height is 25% of window height</div>