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>
Related
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
hello everyone,
I need help, I would like have 2 sections in my <main> and I would like that the first section fill the full page and if I scroll I have the second section fill full page again. So I have test this :
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.container {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
min-height: 100%;
}
header,
footer {
height: 100px;
background-color: rgba(0,0,0,0.7);
}
header {
}
main {
}
section {
display: block;
background: #CFF;
}
.one {
background: red;
height: 100%;
}
.two {
background: cyan;
height: 100%;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div class="container">
<header></header>
<main>
<section class="one"></section>
<section class="two"></section>
</main>
<footer></footer>
</div>
</body>
</html>
as you can see my footer is at the bottom of the first section but I would like he go at the real bottom of the second section.
And if it's possible I would like fixed my header but if I put position : fixed; in the header {} my header is hidden ??
sorry for my bad english.
Can you please help me, have a nice day !
First get rid of all the height: 100% in no case they would work at all with your declarations.
No need for grid here.
just add: .one { height: calc(100vh - 100px);
add .two { height: calc(100vs - 200px);to subtrate both the footer and header height.
add: header { position: sticky; }. this will not move the header out of the flow by default. it will stick to the top though.
as both your footer and header has a fixed height of 100px you can use the calc function to size both sections that way.
html, body {
margin: 0;
}
header,
footer {
height: 100px;
background-color: rgba(0,0,0,0.7);
}
header {
position: sticky;
top: 0;
}
section {
display: block;
background: #CFF;
}
.one {
background: red;
height: calc(100vh - 100px);
}
.two {
background: cyan;
height: calc(100vh - 200px);
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div class="container">
<header></header>
<main>
<section class="one"></section>
<section class="two"></section>
</main>
<footer></footer>
</div>
</body>
</html>
*{
margin:0;
padding:0;
}
header {
position: fixed;
height: 20vh;
width: 100vw;
z-index: 1;
background-color: black;
}
section {
display: block;
background: #CFF;
}
.one {
top:20vh;
background: red;
height: 100vh;
}
.two {
background: cyan;
height: 100vh;
}
footer{
height: 20vh;
background-color: blue;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div class="container">
<header>434343</header>
<main>
<section class="one"></section>
<section class="two"></section>
</main>
<footer></footer>
</div>
</body>
</html>
You can use the property height: 100vh; to set the height of any div the height of viewport. The 100vh is used to fix the height of an element or div the height of screen or viewport. I have fixed your "position: fixed" problem too. Now you can scroll and your header will be visible. You can achieve this by fixing your header's width and height as I have fixed.
In this case You can easily, change percentage to vh units in section one and section two classes. That's it ! Here You can read more about units. Set position: sticky and top: 0 on header selector, to make your navigation work as You wish ;)
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.container {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
min-height: 100%;
}
header,
footer {
height: 100px;
background-color: rgba(0,0,0,0.7);
}
header {
position: sticky;
top: 0;
}
main {
}
section {
display: block;
background: #CFF;
}
.one {
background: red;
height: 100vh;
}
.two {
background: cyan;
height: 100vh;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div class="container">
<header></header>
<main>
<section class="one"></section>
<section class="two"></section>
</main>
<footer></footer>
</div>
</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>
<!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 have a HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Прижатый к низу футер</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
background-color: #DDE4EA;
}
.container {
max-width: 1250px;
margin: 0 auto;
}
.page {
min-height: 100%;
height: auto !important;
height: 100%;
}
.wrap {
padding-bottom: 77px;
background-color: #000;
color: White;
}
.footer {
height: 77px;
margin-top: -77px;
background-color: #E11;
color: White;
}
</style>
</head>
<body>
<!--<div class="container">-->
<div class="page">
<div class="wrap">
Content
</div>
</div>
<div class="footer">
Footer
</div>
<!--</div>-->
</body>
</html>
In this case, footer is working as I need (top image), and when I uncomment div "container", footer isn't works (bottom image)
See attached screenshot:
That's happening because you are applying the .container class without height: 100%; in the CSS, and footer is now contained with .container.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Прижатый к низу футер</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
background-color: #DDE4EA;
}
.container {
max-width:100%;
margin: 0 auto;
height:100%;
}
.page {
min-height: 100%;
height: auto !important;
height: 100%;
}
.wrap {
padding-bottom: 77px;
background-color: #000;
color: White;
}
.footer {
height: 77px;
margin-top: -77px;
background-color: #E11;
color: White;
}
</style>
</head>
<body>
<div class="container">
<div class="page">
<div class="wrap">
Content
</div>
</div>
<div class="footer">
Footer
</div>
</div>