I am looking to display 4 quadrants on the page with no vertical or horizontal scrollbar using flexbox. I achieved this. Each quadrant will contain an image. This is where the problem comes in. The aspect ratio of the images will be the same but the sizes could vary.
I would like each image to always completely fill its div regardless of the size of the display (something like what object-fit: contain does).
The images should not overflow outside of their divs and should not create a scrollbar.
Guidelines:
The 4 quadrants combined should fill the entire browser window with no horizontal or vertical scrollbars
Each image must fully fill its quadrant without any overflow or padding / spacing
Here is what I have so far:
body {
padding: 0; margin: 0;
height: 100vh;
}
.item {
width: 100%;
height: 100%;
}
.container {
display: flex;
flex-wrap: wrap;
}
.container > div {
flex: 50%;
box-shadow: 0 0 0 1px black;
}
img {
width: 100%;
object-fit: contain;
}
<!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>
<link rel="stylesheet" href="styles.css">
<!-- <script src="scripts.js"></script> -->
</head>
<body>
<div class="container">
<div class="item"><img src="https://dummyimage.com/400x200/000/fff"></div>
<div class="item"><img src="https://dummyimage.com/800x400/000/fff"></div>
<div class="item"><img src="https://dummyimage.com/1200x800/000/fff"></div>
<div class="item"><img src="https://dummyimage.com/2400x1600/000/fff"></div>
</div>
</body>
</html>
remove the inner div .item set width and height of .container to 100vw & 100vh.
image will have 50% on both height and width of the parent.each image size will be equal to 50vw,50vh.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
outline: 1px solid red;
}
.container {
display: flex;
width: 100vw;
height: 100vh;
flex-wrap: wrap;
}
img {
width: 50%;
height:50%;
}
<!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>
<link rel="stylesheet" href="styles.css">
<!-- <script src="scripts.js"></script> -->
</head>
<body>
<div class="container">
<img src="https://dummyimage.com/400x200/000/fff">
<img src="https://dummyimage.com/800x400/000/fff">
<img src="https://dummyimage.com/1200x800/000/fff">
<img src="https://dummyimage.com/2400x1600/000/fff">
</div>
</body>
</html>
.container > div {
display: flex;
flex: 50%;
box-shadow: 0 0 0 1px black;
}
img {
flex-grow : 1l
width: 100%;
min-width: 100%;
max-width: 100%;
overflow: hidden;
object-fit: contain;
}
i think this should work
body {
padding: 0;
margin: 0;
}
.container {
display: flex;
flex-wrap: wrap;
width: 100vw;
height: 100vh;
}
.container>div {
flex: 50%;
box-shadow: 0 0 0 1px black;
}
img {
width: 100%;
object-fit: cover;
height: 100%;
}
<!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>
<link rel="stylesheet" href="styles.css">
<!-- <script src="scripts.js"></script> -->
</head>
<body>
<div class="container">
<div class="item"><img src="https://dummyimage.com/400x200/000/fff"></div>
<div class="item"><img src="https://dummyimage.com/800x400/000/fff"></div>
<div class="item"><img src="https://dummyimage.com/1200x800/000/fff"></div>
<div class="item"><img src="https://dummyimage.com/2400x1600/000/fff"></div>
</div>
</body>
</html>
I'm not sure what you see; is this what you want?
If it's not, could you share an image of what you seek it to look like
Related
I am building a very simple web page with the purpose of using it later for javascript.
It is an image with a button that will perform functions later, however, as soon as I was able to center my background, it overlaps the content and does not let me see it or interact with it.
* {
box-sizing: border-box;
}
.bg {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
h1 {
text-align: center;
}
.logo {
padding-top: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.container {
padding-top: 100px;
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>Keyless Car</title>
</head>
<body>
<div class="bg">
<img src="https://via.placeholder.com/2000/0000FF/808080">
</div>
<div class="logo">
<img src="https://via.placeholder.com/150/000000/808080">
</div>
<div class="container">
<img src="https://via.placeholder.com/2000/0000FF/808080" style="width: 150px">
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
The idea is of course to be able to visualize all the content.
As a side note, the image that I am using to make the button (container) is in png so that it does not stain my background
This is because you have set the position property on .bg to be fixed. Once you do that the div gets fixed on the top left corner and takes the topmost position on the stack order of elements and hence hiding other elements.
Kindly make the following changes to the code and it should work.
* {
box-sizing: border-box;
}
.bg {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
z-index:-1;
}
h1 {
text-align: center;
}
.logo {
padding-top: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.container {
padding-top: 100px;
display: flex;
justify-content: center;
align-items: center;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>Keyless Car</title>
</head>
<body>
<div class="bg">
<img src= "https://via.placeholder.com/2000/0000FF/808080">
</div>
<div class="logo">
<img src= "https://via.placeholder.com/150/000000/808080">
</div>
<div class="container">
<img src="https://via.placeholder.com/150/0000CC/808080" style= "width: 150px" >
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
These are my html and css files and I'm facing issue with css not working after I reset margin and padding in the begining of my css so I should be getting my browser page divided into two section of 30% red and 70% white but for some reason it doesn't seem to work
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fashion</title>
<link rel="stylesheet" href="./style.css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<div class="hero">
<div class="left-col"></div>
<div class="right-col"></div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
.hero {
height: 100%;
width: 100%;
display: flex;
}
.left-col {
flex-basis: 30%;
height: 100%;
background: #e80707;
}
.right-col {
flex-basis: 70%;
height: 100%;
}
Its working fine, you are not able to see the output just because there is nothing in your left and right col, and due to that, height is 0, try adding some content or give height to left and right col.
*{
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
.hero {
height: 100%;
width: 100%;
display: flex;
}
.left-col{
flex-basis: 30%;
height: 100%;
background: #e80707;
}
.right-col{
flex-basis: 70%;
height: 100%;
background: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fashion</title>
<link rel="stylesheet" href="./style.css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<div class="hero">
<div class="left-col">Left Col</div>
<div class="right-col">Right Col</div>
</div>
</body>
</html>
I'm having really hard times adjusting the layout for a website, and hopefully someone could help. The issue is that the body with a height of 100% takes the browser's height, but it doesn't extend beyond as per children elements. So for example in the following layout, the footer is over the .second div. The goal is to have the .first taking the full height of the browser and keep the order as it is.
100vh - is not an option due to mobile issues, hence please let me know if this is doable with 100%
Thank you!
<!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>Document</title>
<style>
html, body{
min-height: 100%;
height: 100%;
background-color:blue;
margin: 0;
padding: 0;
}
.wrapper{
height: 100%;
background-color: yellow;
}
.main{
height:100%;
background-color: red;
}
.first{
height: 100%;
background-color: green;
}
.second{
background-color:brown;
}
.footer{
background: black;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="main">
<div class="first">
First Page
</div>
<div class="second">
Second Page
</div>
</div>
<div class="footer">
Footer
</div>
</div>
</body>
</html>
By setting height: 100% it's going to be 100%, no more, no less.
If you change it to min-height, it's going to be 100% or more.
Note that I changed .first to 100vh, since 100% doens't work with min-height
<!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>Document</title>
<style>
html,
body {
min-height: 100%;
height: 100%;
background-color: blue;
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
background-color: yellow;
}
.main {
min-height: 100%;
background-color: red;
}
.first {
height: 100vh;
background-color: green;
}
.second {
background-color: brown;
}
.footer {
background: black;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="main">
<div class="first">
First Page
</div>
<div class="second">
Second Page
</div>
</div>
<div class="footer">
Footer
</div>
</div>
</body>
</html>
Alternatively if you want first page and second page to be 100% then you can simply put them on the same level as the footer (I removed the .main)
<!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>Document</title>
<style>
html,
body {
min-height: 100%;
height: 100%;
background-color: blue;
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
background-color: yellow;
}
.main {
height: 100%;
background-color: red;
}
.first {
height: 100%;
background-color: green;
}
.second {
height: 100%;
background-color: brown;
}
.footer {
background: black;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="first">
First Page
</div>
<div class="second">
Second Page
</div>
<div class="footer">
Footer
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="carousel"></div>
<div class="content"></div>
<div class="content"></div>
</div>
<style>
.container{
max-width: 480px;
margin: 0 auto;
}
.container .carousel{
background-color: lightsalmon;
height: 400px;
width: 100%;
/* Make the carousel's width fill the viewport */
}
.container .content{
margin: 10px 0px;
background-color: steelblue;
height: 200px;
width: 100%;
}
</style>
</body>
</html>
I have this kind of problem.
I need to make the carousel fill the entire viewport horizontally.
I don't want to use position: absolute cuz it will lose the height info to other elements, so I need to add more css to the container and if I need to change the height of the carousel, I need to modify both places. And I don't want to detach it from container as well cuz it suppose to be inside of the container.
So is there better a way that I only need to add some css to .carousel to achieve this?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="carousel"></div>
<div class="content"></div>
<div class="content"></div>
</div>
<style>
.container{
width: 100%;
margin: 0 auto;
}
.container .carousel{
background-color: lightsalmon;
height: 400px;
width: 100%;
margin-bottom: .5em;
/* Make the carousel's width fill the viewport */
}
.container .content{
margin: 10px 0px;
background-color: steelblue;
height: 200px;
width: 100%;
max-width: 30%;
margin: 0 auto;
margin-bottom: .5em;
}
</style>
</body>
</html>
I hope this is what you are looking for!
Also, you should not limit your container to certain width if you want your content elements to fill the complete view port, instead resize you elements as per the need.
Have created a new codepen sample. Check classes row, container-fluid and container here.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="carousel"></div>
<div class="placeholder"></div>
<div class="content"></div>
<div class="content"></div>
</div>
<style>
.container {
max-width: 480px;
margin: 0 auto;
}
.container .placeholder,
.container .carousel {
height: 400px;
}
.container .carousel {
background-color: lightsalmon;
width: 100vw;
position: absolute;
left: 0;
}
.container .content {
margin: 10px 0px;
background-color: steelblue;
height: 200px;
width: 100%;
}
</style>
</body>
</html>
Wait, I think I figured out a way to solve this.
By adding a placeholder div below the carousel sharing the same height.
Now I can make the carousel position: absolute without screwing up the contents below.
This is one way to do it using viewport:
<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>viewport</title>
<style>
body {
margin: 0 auto;
padding:0px;
}
.layer {
width: 100%;
height: 100vh;
color:#000;
text-align:center;
}
p {
margin: 0 auto;
}
.one {
background-color: blue;
}
.two {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<div class="layer one">
<p>layer one</p>
</div>
<div class="layer two">
<p>layer two</p>
</div>
</div>
</body>
</html>
I wanted to use float: right; but it made space after the div and it looks like div has margin-bottom, but it actually hasn't.
Why is that?
And how can I remove the space what created by float: right;?
.container {
background-color: #bbbbbb;
width: 70%;
}
.line {
display: inline-block;
width: 100%;
}
.child {
background-color: coral;
height: 2em;
width: 50%;
float: right;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="line"><div class="child"></div></div>
<div class="line"><div class="child"></div></div>
</div>
</body>
</html>
try using display: flex;
.container {
background-color: #bbbbbb;
width: 70%;
}
.child {
background-color: coral;
height: 3em;
width: 50%;
display: flex;
margin-left: auto;;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="line">
<div class="child"></div>
</div>
<div class="line">
<div class="child"></div>
</div>
</div>
</body>
</html>
This behaviour is a result of the display: inline-block property declared on the containing elements (.line) of the nested floated elements (.child); creating a "white space" between sibling elements.
To resolve this, consider declaring a vertical-align property on the containing elements (.line), as demonstrated below.
.line {
display: inline-block;
width: 100%;
vertical-align: top; /* additional */
}
Note: this property value can be applied to this element due to the inline nature of the block element.
Code Snippet Demonstration:
.container {
background-color: #bbbbbb;
width: 70%;
}
.line {
display: inline-block;
width: 100%;
vertical-align: top; /* additional */
}
.child {
background-color: coral;
height: 2em;
width: 50%;
float: right;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="line">
<div class="child"></div>
</div>
<div class="line">
<div class="child"></div>
</div>
</div>
</body>
</html>