I am using flexbox and trying to get six divs to take up the remaining height of the page. Two issues I am having:
I am having trouble getting the six divs to take up the remainder of the height, but no more.
I am getting a white margin at the top of the page
My code looks like this:
<!DOCTYPE html>
<html>
<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
h2 {
text-align: center;
}
#all {
background-color: red;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#main {
display: flex;
width: 80%;
margin: 10px auto;
height: 100%;
}
.category {
border: solid black 2px;
flex: 1;
flex-grow: 1;
margin: 0px 20px;
height: 100%;
text-align: center;
font-size: 1.2em;
font-weight: bold;
}
</style>
<div id="all">
<h2>My page</h2>
<div id="main">
<div class="category">Category 1</div>
<div class="category">Category 2</div>
<div class="category">Category 3</div>
<div class="category">Category 4</div>
<div class="category">Category 5</div>
<div class="category">Category 6</div>
</div>
</div>
</html>
I have tried using various styles such as flex-grow, stretch, and height of 100% to the body. However, none of these seem to be doing the trick. What am I doing wrong?
The white space on the top caused by the default margins, you remove those with
*{
margin:0;
}
The one in the bottom caused by the height: 100%; on the main container see that it's display is flex it'll 100% height of the viewports height, but since there's an h1 pushing, the #main is being pushed therefore the children with height 100% are pushed aswell, you can either remove the height 100% from the #all or remove h1.
I removed the height 100% from #id, because an element's height should be defined by it's content.
*{
margin:0;
box-sizing:border-box;
}
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
h2 {
text-align: center;
}
#all {
background-color: red;
width: 100%;
/* height: 100%; */
margin: 0px;
padding: 0px;
}
#main {
display: flex;
width: 80%;
margin: 10px auto;
height: 100%;
}
.category {
border: solid black 2px;
flex: 1;
flex-grow: 1;
margin: 0px 20px;
height: 100%;
text-align: center;
font-size: 1.2em;
font-weight: bold;
}
<div id="all">
<h2>My page</h2>
<div id="main">
<div class="category">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="category">Category 2</div>
<div class="category">Category 3</div>
<div class="category">Category 4</div>
<div class="category">Category 5</div>
<div class="category">Category 6</div>
</div>
</div>
I came up with the following solution. It requires using display: flex twice and to set the h2 to display as flex: 0 and the remainder to display as flex: 1.
<!DOCTYPE html>
<html>
<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
#all {
background-color: red;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
}
h2 {
flex: 0;
text-align: center;
}
#main {
display: flex;
flex: 1;
flex-direction: row;
width: 80%;
margin: 10px auto;
height: 100%;
}
.category {
border: solid black 2px;
flex: 1;
margin: 0px 20px;
text-align: center;
font-size: 1.2em;
font-weight: bold;
}
</style>
<div id="all">
<h2>My page</h2>
<div id="main">
<div class="category">Category 1</div>
<div class="category">Category 2</div>
<div class="category">Category 3</div>
<div class="category">Category 4</div>
<div class="category">Category 5</div>
<div class="category">Category 6</div>
</div>
</div>
</html>
Related
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed last month.
I am not able to get the ellipses to work inside a flex box. I have gone over a ton of examples and answers on how to do this but nothing is working. I need to shorten the long text with an ellipses in column 2.
* {
box-sizing: border-box;
}
.application {
display: flex;
width: 100%;
height: 100%;
border: 2px solid red;
margin: 10px;
}
.container1,
.container2 {
flex: 1 1 auto;
display: flex;
flex-direction: column;
margin: 10px;
border: 1px solid green;
}
.container2 {
border: 1px solid purple;
}
.row {
display: flex;
width: 100%;
padding: 5px;
}
.col1 {
width: 100px;
background: lightgreen;
}
.col2 {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.col3 {
width: 60px;
background: yellow;
}
<div class="application">
<div class="container1">
<div class="row">
<div class="col1"> </div>
<div class="col2">This is a short Text</div>
<div class="col3"></div>
</div>
<div class="row">
<div class="col1"></div>
<div class="col2">
Lorem ipsum dolor sit amet. Id totam perspiciatis qui adipisci delectus id molestiae quas et voluptatem tenetur est provident rerum. Et error molestiae sed nihil suscipit et ullam galisum et ratione nesciunt!
</div>
<div class="col3"></div>
</div>
</div>
<div class="container2"></div>
</div>
You need to add a specific width in px.
max-width: value; / width: value;
Either width or max-width works well.
Here is the new code :)
* {
box-sizing: border-box;
}
.application {
display: flex;
width: 100%;
height: 100%;
border: 2px solid red;
margin: 10px;
}
.container1,
.container2 {
flex: 1 1 auto;
display: flex;
flex-direction: column;
margin: 10px;
border: 1px solid green;
}
.container2 {
border: 1px solid purple;
}
.row {
display: flex;
width: 100%;
padding: 5px;
}
.col1 {
width: 100px;
background: lightgreen;
}
.col2 {
flex: 1;
min-width: 0;
max-width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.col3 {
width: 60px;
background: yellow;
}
<div class="application">
<div class="container1">
<div class="row">
<div class="col1"> </div>
<div class="col2">This is a short Text</div>
<div class="col3"></div>
</div>
<div class="row">
<div class="col1"></div>
<div class="col2">
Lorem ipsum dolor sit amet. Id totam perspiciatis qui adipisci delectus id molestiae quas et voluptatem tenetur est provident rerum. Et error molestiae sed nihil suscipit et ullam galisum et ratione nesciunt!
</div>
<div class="col3"></div>
</div>
</div>
<div class="container2"></div>
</div>
With the snippet below I would like to have the fixed divs appear in the screenshot below preferably without having to set an explicit height or margin-top because if I do that, I will need different heights at different breakpoints and I don't want to use javascript.
Is it possible to stack position: fixed divs in this way without explicit heights or margin-top?
body {
text-rendering: optimizespeed;
height: 100%;
background-color: rgb(241, 241, 241);
}
#root {
height: 100%;
display: grid;
grid-template:
"header" auto
"main" 1fr
"footer" auto / 1fr;
}
.scroller {
height: 150vh;
overflow: auto;
border: 10px solid red;
}
main {
position: relative;
}
.ours {
border: 10px solid blue;
position: fixed;
width: 100%;
left: 0px;
right: 0px;
top: 0px;
}
.third-party {
align-items: center;
background-color: rgb(255, 255, 255);
box-sizing: border-box;
display: grid;
grid-template-areas: "leading center trailing";
justify-content: space-between;
position: fixed;
width: 100%;
left: 0px;
right: 0px;
top: 0px;
z-index: 1000;
border: 3px solid green;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link type="text/css" rel="stylesheet" href="/src/styles.css" />
</head>
<body>
<div id="root">
<header class="ours">Should be no.1</header>
<main>
<div class="third-party">
<header>should be no.2</header>
</div>
<div class="scroller">
scroller should come after 2
</div>
</main>
</div>
</body>
</html>
wrap div one and two with another div and apply position:sticky to it with top:0
Sample:
.one {
background-color: red;
}
.two {
background-color: green;
}
.scroll {
height: 800px;
border: 2px dashed;
padding: 10px;
}
.fixed {
position: sticky;
top: 0;
width: 100%;
}
.main {
padding: 0;
margin: 0
}
<div class="main">
<div class="fixed">
<div class="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
<div class="two">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="scroll"> Something in scroll div </div>
</div>
I've created a web app based on Bootstrap and I try to add a lightbox to it. I've looked for various plugins, but none will meet my requirements unfortunately.
My lightbox has two main sections that fight me really hard: an image on the top and a text with a headline and a description on the bottom.
The problem that I'm facing is, I want the lightbox restrict the size of the content, means, if the whole content is bigger then 100% vh or vw it should scale it down. And because that is hard to do with text, the image needs to be scaled. But whatever I do, I can not make the image scalable.
This is what I have so far:
HTML
<div id="agp-lightbox" class="agp-lightbox" #click="$emit('close')">
<div class="lightbox-content" :key="this.index">
<div class="content-left">
<a class="prev" #click.stop="prev" v-show="hasPrev()"><span class="fa fa-chevron-left"></span></a>
</div>
<div class="content-middle">
<div class="close cursor fa fa-window-close" #click="$emit('close')"></div>
<div class="numbertext">{{this.index+1}}/{{this.amount}}</div>
<div class="img-box">
<img v-bind:src="this.imglink">
</div>
<div class="caption-container">
<h3>{{this.info.title}}</h3>
<span v-html="this.info.description_de"></span>
<p>
Material: {{this.info.material_de}},
Preis: {{this.info.price}},
Format: {{this.info.artwork_format}}
</p>
</div>
</div>
<div class="content-right">
<a class="next" #click.stop="next" v-show="hasNext()"><span class="fa fa-chevron-right"></span></a>
</div>
</div>
</div>
CSS
.agp-lightbox {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
z-index: 99;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
min-width: 0;
min-height: 0;
background-color: rgba(0, 0, 0, 0.8);
}
.lightbox-content {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 20px;
height: 90%;
width: 90%;
min-width: 0;
min-height: 0;
border: solid 1px red;
overflow: hidden;
}
.content-left {
color: white;
border: solid 1px green;
}
.content-middle {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-width: 0;
min-height: 0;
overflow: hidden;
border: solid 1px lightskyblue;
}
.content-right {
color: white;
border: solid 1px yellow;
}
.caption-container {
color: white;
}
.img-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-width: 0;
min-height: 0;
overflow: hidden;
border: solid 1px orange;
}
.img-box img {
display: flex;
}
.close, .number-text {
display: none;
}
As said, it works in general, but as soon the image gets to big, it will not shrink so the whole content will not fit and gets cut (.lightbox-content). It gets even tougher when the image is not in landscape, but portrait format...
Also here is a JS Fiddle for the example...
https://jsfiddle.net/qg52jh6a/
As a last resort, I could restrict the image size, but I want it as flexible as possible. Any ideas?
I'd use the image as a background-image and set its attributes via css instead of loading it as an image.
I have simplified your markup considerably because there is a lot of unnecessary bits in there. All you need is to use CSS flexbox in the lightbox, and then use object-fit: contain for your image. If you wish the image to be cropped so that it covers all area, then use object-fit: cover.
Object fit is actually very widely supported today, with the notable exception of IE11 of course.
body {
margin: 0;
padding: 0;
}
.lightbox {
position: fixed;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.lightbox__caption {
flex-grow: 0;
}
.lightbox__image {
flex-grow: 1;
overflow: hidden;
}
.lightbox__image img {
object-fit: contain;
width: 100%;
height: 100%;
}
<div class="lightbox">
<div class="lightbox__image">
<img src="https://picsum.photos/800/600">
</div>
<div class="lightbox__caption">
<h3>Title</h3>
<span>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </span>
</div>
</div>
I am trying to make a pure HTML/CSS site using flex box, using an image that takes up 50% of the left, a text box that takes up 50% of the right, and the footer takes up 100% of the width below them(I'll want to add a navigation later, maybe a hamburger menu, not relevant to this issues atm) , while making them responsive to devices of different sizes. *I want the image and right text box to wrap into a column(img on top of text box) on smaller devices
Problems I am running in to are, setting the image to max-width or max-height 100% makes it larger than the div container it in is, the image is not filling the box fully, (I want to keep the image proportionate to original size)
As you can see below, the image is not taking up 100% of the container, the below CSS is not the only CSS I've been experimenting with. But I have been looking at other articles I've found on stackoverflow etc, but nothing is looking for quite the same issue;
body {
font-family: 'Roboto Mono', monospace;
margin: 0px;
padding: 0px;
text-align: left;
display:block
}
img {
// width:auto;
max-height: 100%;
// overflow: none;
// position: absolute;
height: 400px;
// max-width: 100%;
top: 0;
bottom: 0;
border: 1px solid green;
}
.container {
display: flex;
flex-flow: row wrap;
}
.container > * {
padding: 0px;
flex: 1 100%; }
#media all and (min-width: 600px) {
.content {
flex: 1 0;
}
}
Please check below example. it's maybe helps you.
*, ::after, ::before {
box-sizing: border-box;
}
body {
margin: 0;
font-family:sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
}
img {
max-width: 100%;
}
.container {
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
.content {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
}
.content .col {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
padding-left: 15px;
padding-right: 15px;
}
.footer {
background: #eee;
height: 100px;
}
#media(max-width: 767px){
.content .col {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
</head>
<body>
<div class="wrapper">
<main>
<div class="container">
<div class="content">
<div class="col left">
<img src="https://images.pexels.com/photos/994517/pexels-photo-994517.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" title="" alt=""/>
</div>
<div class="col right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</main>
<footer>
<div class="footer"></div>
</footer>
</div>
</body>
</html>
I have a parent div with fixed height. Inside it I have two divs aligned to top and bottom. Top div has max-height and min-height. When it is a lot of text inside div in grows until max-height.
In this case bottom div should fill rest spaces of parent div when there is few data inside top div.
.div1 {
border: 1px solid blue;
top: 0;
position: absolute;
width: 100%;
overflow: auto;
max-height: 384px;
min-height: 160px;
}
.div2 {
border: 1px solid red;
bottom: 0;
position: absolute;
height: auto;
min-height: 202px;
}
.parent_el {
height: 586px !important;
border: 1px solid black;
position: relative;
}
<div class="parent_el">
<div class="div1" id=div1>
Text. Here can be huge text also
</div>
<div id="map" class="div2">
Here would be picture or map so it must grow in height when top div is small
</div>
</div>
This is a perfect case for a flexbox:
.parent_el {
display: flex; /*make parent a flexbox*/
flex-direction: column; /*children should go down the page*/
}
.div2 {
flex: 1; /*fill the rest of the container*/
}
Remove position: absolute and width: 100% as I've done in my Snippets.
Snippet demonstrating min-height:
.parent_el {
display: flex; /*make parent a flexbox*/
flex-direction: column; /*children should go down the page*/
height: 586px;
border: 1px solid black;
}
.div1 {
border: 1px solid blue;
max-height: 384px;
min-height: 160px;
overflow: auto;
}
.div2 {
flex: 1; /*fill the rest of the container*/
border: 1px solid red;
}
<div class="parent_el">
<div class="div1">
Text. Here can be huge text also
</div>
<div class="div2">
Here would be picture or map so it must grow in height when top div is small
</div>
</div>
Snippet demonstrating max-height:
.parent_el {
display: flex; /*make parent a flexbox*/
flex-direction: column; /*children should go down the page*/
height: 586px;
border: 1px solid black;
}
.div1 {
border: 1px solid blue;
max-height: 384px;
min-height: 160px;
font: 50px arial;
overflow: auto;
}
.div2 {
flex: 1; /*fill the rest of the container*/
border: 1px solid red;
}
<div class="parent_el">
<div class="div1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="div2">
Here would be picture or map so it must grow in height when top div is small
</div>
</div>