Is it possible to fill the remaining screen space around a div
that is centered on the screen like so:
The red div
has the following properties as I would like to keep the same aspect ratio and have it in the center of the screen:
position: absolute;
height: 80%;
width: auto;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
Is it possible to adjust the 4 surrounding divs dynamically to fill the remaining space on the screen?
EDIT: The red div
is a transparent image
I don't agree a lot with the other solution as the question was to fill remaining spaces and the answer simply provided equal rows and in the second row equal columns. So it's clear that the 4 surrounding divs are not filling the remaining space.
I think this is what you need:
body { margin: 0; height: 100vh; display: flex; flex-direction: column; } .top, .bottom { flex: 1; background: blue; } .middle { display: flex; } .middle:before, .middle:after { content: ""; flex: 1; background: green; } img { opacity:0.6; }
<div class="top"> </div> <div class="middle"> <img src="https://lorempixel.com/200/100/"> </div> <div class="bottom"> </div>
body { margin: 0; height: 100vh; display: flex; flex-direction: column; } .top, .bottom { flex: 1; background: blue; } .middle { display: flex; } .right, .left{ flex: 1; background: green; } img { opacity:0.6; }
<div class="top"> </div> <div class="middle"> <div class="left"></div> <img src="https://lorempixel.com/200/100/"> <div class="right"></div> </div> <div class="bottom"> </div>
body { /* 100vw = the width of the screen*/ /* 200 = initial width of the image*/ /* 100 = initial height of the image*/ /* 40vh = the % we specified in the image (40%) but used with vh unit */ --main-start: calc((100vw - ((200 / 100) * 40vh)) / 2); --main-end: calc(var(--main-start) + ((200 / 100) * 40vh)); margin: 0; height: 100vh; display: flex; flex-direction:column; justify-content: center; align-items: center; background:linear-gradient(to right,green var(--main-start),transparent var(--main-start),transparent var(--main-end),green var(--main-end)); } body:before, body:after { content: ""; flex: 1; background:blue; width:100%; } img { height: 40%; opacity:0.6; }
<img src="https://lorempixel.com/200/100/">
body { /* 100vh = the height of the screen*/ /* 200 = initial width of the image*/ /* 100 = initial height of the image*/ /* 40vw = the % we specified in the image (40%) but used with vw unit */ --main-start: calc((100vh - ((100 / 200) * 40vw)) / 2); --main-end: calc(var(--main-start) + ((100 / 200) * 40vw)); margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-image:linear-gradient(green var(--main-start),transparent var(--main-start),transparent var(--main-end),green var(--main-end)); } body:before, body:after { content: ""; flex: 1; background:blue; height:100%; } img { width: 40%; opacity:0.6; }
<img src="https://lorempixel.com/200/100/">
UPDATE
Since the OP will use transparent image and want the colored background to stay, I added in the 2 last solutions linear-background to create a transparent gap below the image since i didn't use any other elements.
.container { display: flex; flex-direction: column; width: 100vw; height: 100vh; } .row { display: flex; flex-direction: row; width: 100%; flex: 1; border: 1px solid red; } .box { flex: 1; border: 1px solid green; text-align: center; }
<div class="container"> <div class="row"> </div> <div class="row"> <div class="box"> </div> <div class="box"> HERE ! </div> <div class="box"> </div> </div> <div class="row"> </div> </div>
How about using display: flex
?
You can make responsive layout easily.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.