This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 5 years ago.
I'm trying to make a web page with a 'header' div of fixed height then a 'content' div below it. Within that content div are several different divs with actual page content in them. In the actual project, the height of all of these elements may vary between different screens and users as their content is mostly generated by PHP.
Sorry if that explanation is unclear, but the following demonstrates what I have got so far:
https://codepen.io/anon/pen/ZJPgWm
(the code is poorly formatted and some of the values look a bit wierd because I've just thrown this together quickly as an imitation of my actual project).
#main {
width: 90%;
min-width: 400px;
max-width: 1200px;
height: calc(100vh - 10px);
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
#head {
background-color: blue;
font-size: 3vh;
}
#content {
background-color: red;
flex-grow: 1;
display: flex;
}
#left {
width: calc(16% - 6px);
float: left;
background-color: green;
}
#inner {
font-size: 10vh;
flex-grow: 1;
width: calc(84% - 6px);
float: left;
margin-left: 8px;
margin-bottom: 10px;
flex-grow: 1;
overflow-x: hidden;
overflow-y: auto;
background-color: yellow;
}
<body>
<div id="main">
<div id="head">
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 id="content">
<div id="left">
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 id="inner">
<p>
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.
</p>
</div
</div>
</div>
</body>
On chrome, a scroll bar is shown within the #inner div. This is what I want.
On firefox and MS Edge, the overflowing content of the #inner div is just cut off, so it is impossible to see that content (without a taller screen).
I should note that the reason for this seems to be that, in chrome, the #inner and #content divs have their height controlled such that their bounding boxes don't go outside the boundary of the #main div. However, in firefox, their bounding boxes extend to below the bottom of the page (shown by developer tools).
What I am looking for is a method which will make all browsers give the result which is currently given by chrome. Ideally, an explanation of which browser is 'correct' and why they are different would also be helpful.
Note that I want to avoid using JS if at all possible. Any help or advice is appreciated.
Flex item's has a min-height that defaults to auto, which means it doesn't shrink below its content's size, so when you nest them like this and put the overflow: auto on a flex item's child, you need to let it know it is allowed to shrink.
Add min-height: 0; to your content rule and they will behave similar.
#main {
width: 90%;
min-width: 935px;
max-width: 1600px;
height: calc(100vh - 90px);
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
#head {
background-color: blue;
font-size: 20px;
}
#content {
background-color: red;
flex-grow: 1;
display: flex;
min-height: 0;
}
#inner {
font-size: 60px;
flex-grow: 1;
overflow-y: auto;
}
<body>
<header>
</header>
<div id="main">
<div id="head">
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 id="content">
<div id="inner">
<p>
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.
</p>
</div </div>
</div>
</body>
Related
I created a parent div with fixed size which contains 2 children, but I want that only the second one will have overflow: auto;
Unfortunately, it doesn't work as expected...
Here is my snippet:
.parent
{
height: 200px;
width: 100px;
background-color: #F00;
padding: 10px;
}
.second-child
{
overflow: auto;
}
<div class="parent">
<div class="first-child">
Some content
</div>
<hr />
<div class="second-child">
"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>
Any ideas?
You can use max-height CSS a property. With the help of max-height, You can set the maximum height. If the content is exceeding the maximum height, Y scroll will be automatically implemented.
Code
.parent
{
height: 200px;
width: 100px;
background-color: #F00;
padding: 10px;
}
.second-child
{
overflow: auto;
max-height:100px
}
<div class="parent">
<div class="first-child">
Some content
</div>
<hr />
<div class="second-child">
"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>
You should set a max-value before the overflow kicks in...
EDIT: Set max-height to % so that it will always be within you changing needs. I kept it as 80% here since it fits in within the second-child nicely
.second-child
{
max-height: 80%;
overflow: auto;
}
Now it should be good!
.parent
{
height: 200px;
width: 100px;
background-color: #F00;
padding: 10px;
}
.second-child
{
max-height: 80%;
overflow: auto;
}
<div class="parent">
<div class="first-child">
Some content
</div>
<hr />
<div class="second-child">
"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>
Updated:
Define a max-height to tell the browser after what length the overflow would take place
Update 2:
Make the container a table
Make the other 2 div's table-rows
In 2nd div, put the text in a position relative following position absolute
.parent {
height: 200px;
width: 100px;
background-color: #F00;
padding: 10px;
display: table;
}
.first-child,
.second-child {
display: table-row;
}
.second-child {
height: 100%;
}
.second-child-content-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.second-child-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
}
<div class="parent">
<div class="first-child">
Some content
</div>
<hr />
<div class="second-child">
<div class="second-child-content-wrapper">
<div class="second-child-content">
"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>
</div>
</div>
I'm working on revamping an intranet page that was built years ago, and I'm trying to figure out the most effective CSS to properly lay out a page with the following requirements:
The page should occupy the full height and width of the viewport and should be responsive to resizing.
There should be a status bar that should always be visible at the bottom and should only be as tall as its contents.
If the user increases the font size, the status bar should properly adjust so the text isn't cut off.
If the content is taller than than the available screen height, scrollbars should appear in the content area to allow it to scroll (again, keeping the status bar visible).
Here's a mockup of the expected result:
As far as browser requirements go, this will ONLY be seen by a very specific group of users that will access it via Internet Explorer 11. No Chrome, no Firefox, no Edge - nothing except IE 11.
I've been experimenting with the "100vh" heights and flex, and I think I'm getting close but I'm just having some trouble getting everything the way I want. My current attempt looks like this:
body {
height: 96vh;
min-height: 96vh;
width: 95vw;
min-width: 95vw;
display: flex;
flex-direction: column;
}
#content
{
padding: 20px;
max-height: 95vh;
overflow:auto;
flex: 1 0 0;
}
#statusbar
{
background-color: #000;
color: #fff;
padding: 20px;
}
<div id="content">
<p>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.</p>
<p>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.</p>
<p>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.</p>
</div>
<footer id="statusbar">Status bar</footer>
I appreciate whatever help can be provided! Thanks in advance!
Here is a solution using display:flex where the footer has variable height and the content adjusts accordingly. The content area is set to overflow:auto in order to scroll if necessary.
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.footer {
flex: 0 1 auto;
}
.box .row.content {
flex: 1 1 auto;
overflow:auto;
}
<div class="box">
<div class="row content">
<p>
<b>content</b>
(fills remaining space)
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
some overflowing text
</p>
</div>
<div class="row footer">
<p><b>footer</b> (variable height)</p>
</div>
</div>
I have a page layout which employs floating boxes with constant width and variable height, inside a variable-width container (which I'm going to make constant for the sake of this question). This is my page's code:
CSS:
#main {
width: 640px;
margin: 0 auto;
min-height: 100%;
}
.profile {
width: 300px;
min-height: 160px;
margin: 10px;
float: left;
}
HTML:
<body>
<div id="main">
<div class="profile">1: I'm tall. 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="profile">2: I'm short.</div>
<div class="profile">3: I'm also short.</div>
<div class="profile">4: I'm short too.</div>
</div>
</body>
When I apply this code, div 4 seems like it's "stuck" in the corner, instead of to the left of div 3 like it should be: (Codepen preview).
What am I doing wrong, and how should I fix this glitch?
You could clear the odd divs:
.profile:nth-child(odd) {
clear:left;
}
Updated Codepen
#main {
width: 640px;
margin: 0 auto;
background: #444;
}
.profile {
width: 300px;
min-height: 160px;
margin: 10px;
float: left;
background: silver;
}
.profile:nth-child(odd) {
clear: left;
}
<body>
<div id="main">
<div class="profile">1: 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="profile">2: I'm short.</div>
<div class="profile">3: I'm also short.</div>
<div class="profile">4: I'm short too.</div>
</div>
</body>
I have a container div set to a fixed position at top of page and several relative position divs scrollable within the container. I can set margin left, right and bottom. But the top margin is ignored and runs up against the top of the container. What am I doing wrong here?
#container {
position: fixed;
width: 32rem;
height: 32rem;
background-color: #000000;
overflow: hidden;
}
#div1 {
position: relative;
width: 30em;
height: 40em;
margin: 5rem 1rem 5rem 1rem;
<div id="container">
<div id="div1"></div>
</div>
You need to add overflow:hidden and change height:22em in #div1
I think you want something like this and I hope it will helps you.
#container {
position: fixed;
width: 32rem;
height: 32rem;
background-color: #000;
overflow: hidden;
}
#div1 {
height: 22em;
margin: 5rem 1rem;
overflow: hidden;
position: relative;
width: 30em;
color:#fff;
}
<div id="container">
<div id="div1">
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.
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.
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>
Is this the desired output? http://jsfiddle.net/t9rkpspu/
#container {
position: fixed;
width: 32rem;
height: 32rem;
background-color: #000000;
overflow: hidden;
}
#div1 {
color: white;
position: relative;
width: 30em;
height: 40em;
margin: 5rem 1rem 5rem 1rem;
}
I'm trying to create a basic HTML5 responsive web design where the header is fixed. I am trying to keep my HTML and CSS code clean and follow best practices. The header has a max width of 980 pixels but the blue header background expands to fill the window (see the diagram).
Right now there's a few issues with my CSS (maybe my HTML) that are causing the header to cover up the content below the header. The header's blue background is also not expanding to fill the left of the window. I also can't get the logo image to center vertically on the header. What I am I missing? I've been playing around with this all night but I've been unable to iron out these issues.
Fiddle: http://jsfiddle.net/DU3D6/
CSS
* { margin: 0; padding: 0; }
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}
#wrapper {
width: 100%;
max-width: 980px;
margin: auto;
}
header {
background-color: blue;
width: 100%;
height: 100px;
top: 0px;
display: block;
margin-left: auto;
margin-right: auto;
position: fixed;
}
#logo {
height: 70px;
width: 160px;
float: left;
display: block;
background: url(logo.png) 0 0 no-repeat;
text-indent: -9999px;
}
HTML
<div id="wrapper">
<header>
Logo
</header>
<section id="main">
<h1>Main section</h1>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
</section>
</div>
I deleted and reposted with updated the tags.
You can remove the margin-left and margin-right from the header. Then add left zero. The JSFiddle doesn't show the image since it's a relative link, but if you want it left aligned but within the 980px centered block, then nest another div inside the header with width 980 and centered.
Then to make the header not cover the content initially, add a top margin bigger than the header, like 110px.
http://jsfiddle.net/A4atq/
* { margin: 0; padding: 0; }
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}
#wrapper {
width: 100%;
max-width: 980px;
margin: auto;
}
header {
background-color: blue;
width: 100%;
height: 100px;
top: 0px;
left: 0;
display: block;
position: fixed;
}
#logo {
height: 70px;
width: 160px;
float: left;
display: block;
background: url(logo.png) 0 0 no-repeat;
/* text-indent: -9999px */;
}
section#main {
margin-top: 110px;
}
}