This question already has answers here:
Make a div fill the height of the remaining screen space
(42 answers)
Closed 6 years ago.
My website has 3 section, header(navbar)+middle(content)+footer(sitemap etc).
My header is a fixed height, my footer contain sitemap which may update time to time, therefore the footer height may increase.
I want to apply 100vh on my middle. How do I use something like .middle{height: calc(100vh - footer.height);}?
Flexbox is ideal for this, check the following layout:
Footer will dynamically grow/shrink depending on content.
Middle content will always be 100% - .footer as desired.
overflow: auto; on middle .content is set in case there is more content, this way it will avoid pushing footer.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
width: 100%;
}
.container {
display: flex;
flex-flow: column wrap;
justify-content: center;
height: 100%;
}
.header {
border: 1px solid red;
width: 100%;
height: 60px;
}
.content {
flex: 1;
width: 100%;
border: 1px solid gray;
overflow: auto;
}
.footer {
display: flex;
width: 100%;
border: 1px solid orange;
}
<div class="container">
<div class="header">navbar</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum repellendus neque repudiandae fugiat error blanditiis omnis nesciunt nostrum porro, officia vel cum deleniti adipisci nihil perferendis eos, veniam numquam, ipsum.</div>
<div class="footer">footer</div>
</div>
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>
I placed a text over an image, but when I increase the screen size the image won't follow, its just stuck at the same place, contrary to the text that responds to the screen-size and moves to the center.
.section2{
max-height: 20rem;
padding-top: 20px;
position: relative;
}
.section2 img{
padding: 20px
}
.abtus {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 60%;
font-size: 1rem;
text-align: center;
padding-top: 6rem;
}
<div class="section2">
<img src="assets/script.png" alt="">
<div class="abtus">
<h1>About Us</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad cum architecto eius molestiae dolore est id vero voluptatem
repellat voluptas quo beatae nulla ex soluta deleniti impedit maxime, enim omnis?</p>
</div>
</div>
If you want to position an absolute element on a picture then you should:
1- put the image and the element in one container.
.container {
height: fit-content;
width: fit-content;
position: relative;
}
2- the image width should be 100% so it can resize according to its parent's width.
3- Use the container to resize the image, don't resize the image itself.
.section2{
max-height: fit-content;
width: 100vw;
position: relative;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.container {
height: fit-content;
width: fit-content;
position: relative;
border: 1px solid blue;
display: flex;
justify-content: center;
align-items: center;
}
.section2 img {
height: auto;
width: 80%;
border: 1px solid red;
}
.abtus {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 60%;
font-size: 1rem;
text-align: center;
padding-top: 6rem;
}
<div class="section2">
<div class="container">
<img src="https://cdn.pixabay.com/photo/2016/01/08/15/18/lizard-1128263_960_720.jpg" alt="">
<div class="abtus">
<h1>About Us</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad cum architecto eius molestiae dolore est id vero voluptatem
repellat voluptas quo beatae nulla ex soluta deleniti impedit maxime, enim omnis?</p>
</div>
</div>
</div>
I think img tag must have width: 100% to follow the parent element size.
img {
width: 100%;
padding: 20px;
}
Check out this fiddle: https://jsfiddle.net/8dvhx0ap/1/
Or here the HTML:
.sidenav {
height: 100%;
width: 160px;
position: fixed;
top: 0;
left: 0;
background-color: black;
display: flex;
}
.smallDiv {
background-color: green;
padding: 10px;
}
.bigDiv {
background-color: blue;
padding: 10px;
width: 60vw;
height: 60vh;
}
.main {
margin-left: 160px;
flex: 1 1 auto;
}
.container {
width: 100%;
display: block;
box-sizing: border-box;
padding: 20px;
}
.grid {
justify-content: center !important;
width: 100%;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
}
<div id="app">
<div style="height: 50px; background-color: red;"></div>
<aside class="sidenav"></aside>
<div class="main">
<div class="container">
<div class="grid">
<div class="smallDiv">
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
</div>
<div class="bigDiv">
</div>
</div>
</div>
</div>
</div>
I want the blue div to fill the empty space. On a normal screen, the green div should be on the left, and the big right space should be filled entirely by the blue div (use the space to the right and bottom but without scrollbars). Changing the page size would result in the blue div getting bigger / smaller. If the screen becomes too small (e.g. I use a phone), the 2 divs should be below each other (like currently).
How can I make the blue div fill the space?
I noticed that the top red div was actually partially hidden by the black sidenav div. So, this meant that the HTML needed to be refactored. Adding content makes it possible to see how it should behave.
You probably also want the black sidenav div to disappear on mobiles, and that can be achieved with a suitable media query.
.container {
display: flex;
flex-direction: row;
}
.main {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.sidenav {
flex-basis: 160px;
flex-shrink: 0;
color: white;
background-color: black;
display: flex;
}
.topDiv {
flex-grow: 1;
height: 60px;
background-color: red;
}
.grid {
display: flex;
flex-direction: row;
}
.smallDiv {
background-color: green;
padding: 10px;
}
.bigDiv {
background-color: blue;
}
#media only screen and (max-width: 600px) {
.grid {
flex-direction: column;
}
}
<div class="container">
<aside class="sidenav">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel facilis alias incidunt aperiam sequi a earum delectus nam similique nostrum, tenetur esse aliquid veritatis dicta tempore? Error asperiores tempore illo!</aside>
<div class="main">
<div class="topDiv">
<h1>A Heading</h1>
</div>
<div class="grid">
<div class="smallDiv">
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
</div>
<div class="bigDiv">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet ab doloribus nostrum deleniti debitis, et odit tempora obcaecati perferendis dolorum ratione asperiores odio ipsum. Sequi consequatur qui nisi quibusdam praesentium!
</div>
</div>
</div>
</div>
I have the effect I am looking for: Content is "centered" in a container with an offset and will gracefully center itself as the window/container shrinks. In my case my yellow content is 25% of the way in from the left in the main container and will become centered when the screen shrinks.
Is there a better or more efficient way of accomplishing this? I have tried the css functions min and clamp but I couldn't achieve what I was looking for.
.container {
background: red;
padding: 2rem;
}
.squish {
margin: 0 auto;
max-width: max-content;
}
.width50 {
min-width: 50vw;
}
.content {
width: 10em;
background: yellow;
padding: 1rem;
}
<div class="container">
<div class="squish">
<div class="width50">
<div class="content">
Sequi distinctio veniam corrupti nihil non. Ea sunt dolorum pariatur accusamus. Eveniet non atque rerum et sed soluta. Magnam quia adipisci iste consectetur velit et perspiciatis
</div>
</div>
</div>
</div>
Have you tried flexbox for this issue? You can center the element by adding display: flex; to the parent and also justify-content: center; Checkout my snippet below :)
Also checkout flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.parent {
display: flex;
justify-content: center;
padding: 5rem 0;
background-color: blue;
}
.content {
padding: 1rem;
background: white;
}
<div class="parent">
<div class="content">
<p>Text Goes here</p>
</div>
</div>
I have three divs in a conainter div. The container is 500px in height. Even after setting the flex grow property to 1 (in the container), the divs don't grow but when set on the elements themselves (child divs within container), they do grow. Is there something I'm missing?
.container {
display: flex;
flex: 1 1 0;
flex-direction: column;
height: 500px;
background-color: red;
}
div div {
flex-basis: 0;
margin: 10px;
border: white 4px solid;
background-color: burlywood;
}
<div class="container">
<div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officia, deserunt necessitatibus! Quod beatae nulla necessitatibus odio recusandae nihil et totam officiis nisi in molestiae numquam, odit, commodi, repudiandae at dolor dolorem dolores fugiat
accusantium eum. Eaque sit repudiandae cum, autem perferendis repellendus accusantium? Sit consequatur ipsum sed dolores repudiandae minus.</p>
</div>
<div></div>
<div></div>
</div>
There is nothing wrong with this behaviour. The flex-grow property is meant to be applied on the flex item itself. It specifies how much the item will grow relative to the rest of the flexible items inside the same container.
No, that is correct. The flex-grow property is intended to be used on a flex item specifically, not on the flex container itself. Applying it to the container will do nothing.
.flex {
width: 350px;
height: 200px;
display: flex;
}
.box-1 {
flex-grow: 1;
background-color: red;
}
.box-2 {
flex-grow: 3;
background-color: blue;
}
.box-3 {
flex-grow: 2;
background-color: green;
}
.box-4 {
flex-grow: 1;
background-color: yellow;
}
.box-5 {
flex-grow: 1;
background-color: gray;
}
<div class="flex">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4"></div>
<div class="box-5"></div>
<div>
.