This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 2 years ago.
I am making my first web application. It is my first time working with html/css/js. This seems to be a common question/issue with css, but I have trouble understanding/making the solution work. This is the closest I've gotten.
I am struggling to make the app (specifically wrapper or body) encompass only the height of the page (no more or less).
If there is little content, content doesn't extend all the way down and the footer is at the middle of the page. Although, adding height: 100%; to html seems to fix this.
If I add a lot of lines to calendar or sidebar, a scroll bar is added to the whole page instead of only calendar or sidebar. height: 100%; in html doesn't seem to fix this.
The width for content seems to work well.
I have tried changing the height for body and wrapper but it doesn't seem to do anything?
Adding overflow: hidden; to body doesn't seem to work either.
Help is appreciated. Thank you.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
#wrapper {
display: flex;
flex-flow: column;
height: 100%;
}
header {
text-align: left;
flex: 0 0 auto;
padding: 20px;
}
#content {
display: flex;
flex-flow: row;
width: 100%;
flex: 1 1 auto;
}
#sidebar {
float: left;
overflow-y: auto;
padding: 20px;
flex: 0 0 20%;
background-color: #00e7eb;
}
#calendar {
float: left;
overflow-y: auto;
padding: 20px;
flex: 1 1 auto;
background-color: #c8eed6;
}
footer {
text-align: center;
flex: 0 0 auto;
padding: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Journal</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="wrapper">
<header>
<h1 id="currentCalendar">Quarter</h1>
</header>
<div id="content">
<div id="sidebar">
<h4>Calendars</h4>
<button>+ Add Calendar</button>
<h4>Classes</h4>
<button>+ Add Class</button>
<h4>Tags</h4>
<button>+ Add Tags</button>
</div>
<div id="calendar">
<p>No calendar. Click '+ Add Calendar' to make new calendar.</p>
</div>
</div>
<footer>
<p>dg</p>
<button>Donate</button>
</footer>
</div>
</body>
</html>
I would go with min-height: 100vh;. Should be noted though, 100vh can be tricky when it comes to mobile depending on your design. You can also try
html, body { min-height: 100%; }
Try adding height: 100vh; to the target element.
in CSS height % values only work if the parent container has a set height. So if you want to adjust the main body to 100% display height you can do:
body{
height: 100vh; /*viewport-height=100% of screen height*/
}
and then you can set the first child of that to 100%
Related
Assume there is a list of lists of images to be displayed on a web page. Images within a list should be grouped in the same, horizontal row (e.g. with display: flex), and those groups should be displayed in a vertical column (e.g. with display: flex; flex-direction: column). The total height of the groups of horizontally ordered images should be equal to the height, of the viewport. The number of image groups and number of images within a groups in the whole list is variable, but I am using two sets of two images apiece as an proof of concept. Furthermore, the original size of these images is variable, so they need to be resized.
How can the images be resized so as to maintain their aspect ratio and fit properly within the webpage without overflow?
I have written the following HTML code with the following CSS to accomplish this. The problem is that the images are not resized (at all) to fit the main div, and the image-group divs overflow the main container. How do I force the image-group divs to shrink to the height of the main-container, and the images to resize to the height of their parent divs?
HTML:
<body>
<div class="main-container">
<div class="image-group" id="dup-set-1">
<img src="./images/1.jpg" class="duplicate-image">
<img src="./images/2.jpg" class="duplicate-image">
</div>
<div class="image-group" id="dup-set-2">
<img src="./images/3.png">
<img src="./images/4.jpg">
</div>
</div>
</body>
CSS:
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}
.main-container {
display: flex;
flex-direction: column;
margin: auto;
width: 100%;
height: 100vh; /* Make the whole container the height of the viewport*/
border: 10px red solid;
}
.image-group {
flex: 1; /* Size the group divs to the height of the main container */
display: flex;
}
.image-group img {
max-height: 100%;
max-width: 100%;
height: 100%; /* Make the image height fit the height of its parent group div */
width: auto; /* Scale the image to keep its original apsect ratio */
}
I have seen this question, which suggests using flex-grow and this question;
which suggested object-fit; however, these questions dealt only with one image-group (i.e. only one intermediate div) and do not seem to resize the image-group divs.
Working now ... (edit: improved code)
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Modal Popup Page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}
.main-container {
display: flex;
flex-direction: column;
margin: auto;
max-width: 100%;
max-height: 100%;
border: 10px red solid;
}
.image-group {
max-width: 50%;
max-height: 50%;
min-width: 50%;
min-height: 50%;
display: inline-flex;
flex-direction: row;
}
.image-group img {
max-width: 100%;
height: auto;
object-fit: cover;
}
</style>
</head>
<body>
<div class="main-container">
<div class="image-group" id="dup-set-1">
<img src="https://images.pexels.com/photos/6102161/pexels-photo-6102161.jpeg?auto=compress&cs=tinysrgb&w=600" class="duplicate-image">
<img src="https://images.pexels.com/photos/6101986/pexels-photo-6101986.jpeg?auto=compress&cs=tinysrgb&w=600" class="duplicate-image">
</div>
<div class="image-group" id="dup-set-2">
<img src="https://images.pexels.com/photos/3334492/pexels-photo-3334492.jpeg?auto=compress&cs=tinysrgb&w=600">
<img src="https://images.pexels.com/photos/5802141/pexels-photo-5802141.jpeg?auto=compress&cs=tinysrgb&w=600">
</div>
</div>
</body>
</html>
flex css property should use with 3 parameters : grow , shrink, basis
grow determine if the flexbox can take full space if have some
shrink determine if the flexbox can take more size IF NEEDED !
basis determine their limits (size)
Example here :
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Document</title>
<style>
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
#wrapper > header {
width: 100%;
flex: 0 0 50px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #e5e5e5;
border-bottom: 1px solid #9b9b9b;
}
#wrapper > section {
width: 100%;
flex: 1 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<section id="wrapper">
<header>HEADER</header>
<section>CONTENT</section>
</section>
</body>
</html>
I have the following code where I want to make the 2 div tags take up all the available height the browser offers.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
.container {
display: flex;
flex-direction: row;
}
.left {
height: 100%;
display: block;
width: 50%;
background-color: green;
overflow-y: scroll;
}
.right {
height: 100%;
background-color: red;
display: block;
width: 50%;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
Text
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Text
</div>
<div class="right">
Text
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Text
</div>
</div>
</body>
</html>
I have decided to do this setting height:100%, but this disables the individual scrollbars of the divs - does anyone know how to make the scrollbars work and having the divs take up the height of the browser? (I don't want to hardcode something like height: 700px)
I'm assuming that by "take up all the available height the browser offers" you mean you want the divs to take up 100% of the viewport. The reason this is not happening in your code is that you have only set the height of the divs to 100%. This means they will take up the full height of their parent element, .container, but you have not set the height of that element (or the height of its parent, body, or the height of its parent, html). You need to set the height of all three of those elements.
In addition, I would explicitly set the margin on body. If you do not, then it defaults to 8px in Firefox, Chrome, and Edge, but it may default to some other number in older versions or other browsers. If you set the margin to 0, then for html and body you can set the height to 100%. If you want the margin of body to be 8px or some other non-zero number, then you need to account for that in the height of html and body. (e.g. height: calc(100% - 8px).
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
html, body {
height: 100%;
}
body {
margin: 0;
}
.container {
display: flex;
flex-direction: row;
height: 100%;
}
.left {
height: 100%;
display: block;
width: 50%;
background-color: green;
overflow-y: scroll;
}
.right {
height: 100%;
background-color: red;
display: block;
width: 50%;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
Text
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Text
</div>
<div class="right">
Text
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Text
</div>
</div>
</body>
</html>
This question already has answers here:
Css height in percent not working [duplicate]
(8 answers)
Percentage Height HTML 5/CSS
(7 answers)
Closed 5 years ago.
I am attempting the following solution described at https://stackoverflow.com/a/22218694/1175080.
Alternatively, instead of aligning the content via the container, flexbox can also center the a flex item with an auto margin when there is only one flex-item in the flex container (like the example given in the question above).
Here is my solution.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
main {
display: flex;
height: 100%;
background: lightgreen;
}
section {
margin: auto;
background: yellow;
}
</style>
</head>
<body>
<main>
<section>Foo</section>
</main>
</body>
</html>
It does not seem to work. The main element does not expand to occupy 100% height of the page. What am I doing wrong? How can this be made to work?
Used height:100vh
body {
min-height: 100vh;
margin: 0;
}
main {
display: flex;
height: 100vh;
background: lightgreen;
}
section {
margin: auto;
background: yellow;
}
<main>
<section>Foo</section>
</main>
Assign html, body with 100% width & height, Like:
html, body {
width: 100%;
height: 100%;
margin: 0;
}
Have a look at the snippet below:
html, body {
width: 100%;
height: 100%;
margin: 0;
}
main {
display: flex;
height: 100%;
background: lightgreen;
}
section {
margin: auto;
background: yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<main>
<section>Foo</section>
</main>
</body>
</html>
Hope this helps!
The main element will use the space allotted to by it's parents, which in this case are body > html.
Therefore, set both body and html to have a height of 100% as well and you should be golden.
html, body {
height: 100%;
}
I am generating one html page having one tab pane which is very long. So i want to add scroll pane so that visualisation could be better. I found few good examples using div but code becomes very messy with other div so i prefer not to use div.
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Independent CSS scrolling panels (with inertia)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="Top">Top Content</div>
<div class="Container">
<div class="Left">Left Content</div>
<div class="Middle">Middle Content</div>
<div class="Right">Right Content</div>
</div>
</body>
</html>
CSS code:
/*I love me some border-box*/
* {
box-sizing: border-box;
}
/*This just stops me getting horizontal scrolling if anything overflows the width*/
body {
overflow-x: hidden;
}
/*Just removing default browser padding/margin*/
html,
body {
padding: 0;
margin: 0;
color: #ebebeb;
}
/*Flexbox gives us the flexiness we need. The top just stays put as there is no scrolling on the body due to the page never exceeding viewport height*/
.Top {
display: flex;
align-items: center;
justify-content: center;
background-color: darkgreen;
font-size: 3rem;
position: relative;
z-index: 10;
height: 100px;
}
/*This is our main wrapping element, it's made 100vh high to ensure it is always the correct size and then moved into place and padded with negative margin and padding*/
.Container {
display: flex;
overflow: hidden;
height: 100vh;
margin-top: -100px;
padding-top: 100px;
position: relative;
width: 100%;
backface-visibility: hidden;
will-change: overflow;
}
/*All the scrollable sections should overflow and be whatever height they need to be. As they are flex-items (due to being inside a flex container) they could be made to stretch full height at all times if needed.
WebKit inertia scrolling is being added here for any present/future devices that are able to make use of it.
*/
.Left,
.Middle,
.Right {
overflow: auto;
height: auto;
padding: .5rem;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
}
/*Entirely optional – just wanted to remove the scrollbar on WebKit browsers as I find them ugly*/
.Left::-webkit-scrollbar,
.Middle::-webkit-scrollbar,
.Right::-webkit-scrollbar {
display: none;
}
/* Left and Right are set sizes while the Middle is set to flex one so it occupies all remaining space. This could be set as a width too if prefereable, perhaps using calc.*/
.Left {
width: 12.5rem;
background-color: indigo;
}
.Middle {
flex: 1;
}
.Right {
width: 12.5rem;
background-color: violet;
}
Can pls someone pls help me how can i implement it.
I suppose you could use a <table>:
table {
display: block;
height: 500px;
overflow-y: scroll;
}
I found several questions about but none of their solutions was working for me so here we go again.
Let's say I have this template of HTML
<html>
<div id="header">...</div>
<div id="contentA">...</div>
<div id="contentB">...</div>
<div id="footer">...</div>
</html>
The footer div should be at least 80px height, but if those 80px plus the height of all other 3 divs is not enough to fullfill the screen I want the footer to increase as much as the screen is filled with it below header, contentA and contentB.
BG-Color Solution
If you just want to let the remaining space have the same background-color as the footer (but not the body), you could add the footer bg-color to the html-tag:
html {
background-color: #footer_color;
}
body {
background-color: #body_color;
}
#footer {
min-height: 80px;
}
.
JS-Solution
If you have something more complex within your footer, you could use javascript/jquery to calculate the remaining space and set the footer to that height.
There is a similar question with a code example here: https://stackoverflow.com/a/14329340/3589841
.
Flexbox-Solution
If you only care about the latest browsers you can use the flexbox-box-model:
HTML:
<html>
<body>
<div id="flex_container">
<div id="header">...</div>
<div id="contentA">...</div>
<div id="contentB">...</div>
<div id="footer">...</div>
</div>
</body>
</html>
CSS:
html, body {
min-height: 100%;
}
#flex_container {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
}
#header {
flex: 0 1 auto;
}
#contentA {
flex: 0 1 auto;
}
#contentB {
flex: 0 1 auto;
}
#footer {
flex: 0 1 100%;
min-height: 80px;
}
I believe you're going for something like this, have a look http://jsfiddle.net/dusUK/
Using CSS, we create a class, which in this case is fullheight, and we apply the following:
.fullheight {
display: block;
position: relative;
background: red;
height: 100%;
}
We also then apply the following to html, body
html, body {
height: 100%;
min-height: 100%;
}