Update This has been solved thanks to LGSon's comment below Updated codepen
I am trying to setup a layout much like the Holy grail. The difference here is that I am looking for a dynamically sized "Content" section to be vertically and horizontally centered.
I have been able to get this working (for large displays) with flexbox: Codepen here
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
.header {
height: 60px;
line-height: 60px;
width: 100%;
background: rgba(255, 0, 0, 0.5);
}
.content {
height: calc(100% - 120px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 255, 0, 0.5);
}
.content p {
width: 50%;
}
.footer {
height: 60px;
line-height: 60px;
width: 100%;
background: rgba(0, 0, 255, 0.5);
}
.header, .footer {
font-weight: bold;
}
<div class="header">
Header
</div>
<div class="content">
<h1>I am the content</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="footer">
Footer
</div>
The problem is that if the "Content" section is too large, or the view is too small, the overflow wont kick in until the div is more than 100% vertical not (100% height - the header and footer heights)
I am trying to make it so that when there is overlap, that the whole page will scroll and not only have a scrollbar within the "Content section".
If you change your html, body rule to this
html, body {
margin: 0;
text-align: center;
display: flex;
flex-direction: column;
}
and then add this new rule
body {
min-height: 100vh;
}
and then change from height: calc(100% - 120px); to flex-grow: 1; in your content rule it will work as you asked for.
The trick here is to make your body a flex container, and then, by setting the content to flex-grow: 1 it will fill the remaining space when the content is smaller, and the min-height: 100vh will allow it to properly grow higher than the viewport when the content is bigger.
Updated codepen
Stack snippet
html, body {
margin: 0;
text-align: center;
display: flex;
flex-direction: column;
}
body {
min-height: 100vh;
}
.header {
height: 60px;
line-height: 60px;
background: rgba(255, 0, 0, 0.5);
}
.content {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 255, 0, 0.5);
}
.content p {
width: 50%;
}
.footer {
height: 60px;
line-height: 60px;
background: rgba(0, 0, 255, 0.5);
}
.header, .footer {
font-weight: bold;
}
<div class="header">
Header
</div>
<div class="content">
<h1>I am the content</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="footer">
Footer
</div>
And if someone want to enable the content to scroll instead of the whole page, change the body rule to height: 100vh and add overflow: auto to the content rule
Updated codepen
Stack snippet
html, body {
margin: 0;
text-align: center;
display: flex;
flex-direction: column;
}
body {
height: 100vh;
}
.header {
height: 60px;
line-height: 60px;
background: rgba(255, 0, 0, 0.5);
}
.content {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
background: rgba(0, 255, 0, 0.5);
overflow: auto;
}
.content p {
width: 50%;
}
.footer {
height: 60px;
line-height: 60px;
background: rgba(0, 0, 255, 0.5);
}
.header, .footer {
font-weight: bold;
}
<div class="header">
Header
</div>
<div class="content">
<h1>I am the content</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="footer">
Footer
</div>
After using position: fixed; on the header and footer, my syggestion is to:
remove the opaque background colours, and replace them with non opaque ones that look exactly the same (this I have already done)
remove the background colour for the article, and give the html, body the background-color instead
use background-color instead of background in this case:
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #7FFF7F;
text-align: center;
}
.header {
position: fixed;
top: 0px;
height: 60px;
line-height: 60px;
width: 100%;
background-color: #FF7F7F;
}
.content {
overflow: scroll;
padding: 60px 0 60px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.content p {
width: 50%;
}
.footer {
position: fixed;
bottom: 0px;
height: 60px;
line-height: 60px;
width: 100%;
background-color: #7F7FFF;
}
.header,
.footer {
font-weight: bold;
}
<div class="header">
Header
</div>
<div class="content">
<h1>I am the content</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="footer">
Footer
</div>
CodePen
Related
I have the following layout, it is a wrapper (content) which contains some other divs which also have some flex properties.
As you can see from the following link the divs inside content are now scaling up with the size of the content.
.content {
width: 100%;
height: 400px;
display: flex;
overflow: auto;
background-color: blue;
}
.a {
width: 165px;
height: 100%;
flex-grow: 1;
background-color: red;
}
.b {
width: 65px;
display: flex;
padding-top: 20px;
padding-bottom: 20px;
justify-content: center;
background-color: yellow;
height: 100%;
}
.c {
width: 165px;
flex-grow: 1;
margin-right: 15px;
background-color: green;
height: 100%;
}
<div class="content">
<div class="a">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="b">
<div class="separator">
s
</div>
</div>
<div class="c">
c
</div>
</div>
What I would like to achieve:
- red, yellow, green divs should me height as the blue (content) div, so when scrolling you do not see the blue part in the bottom
How to achieve this? What is wrong with my code?
I support only latest chrome and I can use CSS3
Your .a is overflowing into .content which is why you see blue section being displayed at the bottom.
By giving .a or rather, all of the children div's an auto overflow, they will follow their parent's height and avoid content overflowing.
Though, it'll introduce a scrollbar. If you are comfortable with hiding the overflowed text, you can use overflow: hidden instead.
.content {
width: 100%;
height: 400px;
display: flex;
overflow: auto;
background-color: blue;
}
.content > div {
overflow: auto;
}
.a {
width: 165px;
height: 100%;
flex-grow: 1;
background-color: red;
}
.b {
width: 65px;
padding-top: 20px;
padding-bottom: 20px;
background-color: yellow;
}
.c {
width: 165px;
margin-right: 15px;
flex-grow: 1;
background-color: green;
height: 100%;
}
<div class="content">
<div class="a">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="b">
<div class="separator">
s
</div>
</div>
<div class="c">
c
</div>
</div>
I think the best option for your problem is either
moving overflow: auto; from the .content class to it's children.
changing the height: 400px; to min-height: 400px; if you have no problem with the container being larger than 400px;
adding a wrapper divwith height: 400px; and overflow: auto; around the .content and removing both rules from the .content(imo the best option)
Remove display: flex from .content and height: 100% from .a .b .c and then wrap your elements in a div and give it a display flex.
Working code:
.content {
width: 100%;
height: 400px;
overflow: auto;
background-color: blue;
}
.inner{
display: flex;
}
.a {
width: 165px;
flex-grow: 1;
background-color: red;
}
.b {
width: 65px;
display: flex;
padding-top: 20px;
padding-bottom: 20px;
justify-content: center;
background-color: yellow;
}
.c {
width: 165px;
flex-grow: 1;
margin-right: 15px;
background-color: green;
}
<div class="content">
<div class="inner">
<div class="a">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="b">
<div class="separator">
s
</div>
</div>
<div class="c">
c
</div>
</div>
</div>
You could possibly try:
flex: 1 1 auto
It sizes based on width/height properties..
check out
Css Tricks article on it.
EDIT
Remove the flex-grow: 1 and it will be the height you need.
.content {
width: 100%;
height: 400px;
overflow: auto;
background-color: blue;
}
.inner{
display: flex;
}
.a {
width: 165px;
background-color: red;
}
.b {
width: 65px;
display: flex;
padding-top: 20px;
padding-bottom: 20px;
justify-content: center;
background-color: yellow;
}
.c {
width: 165px;
margin-right: 15px;
background-color: green;
}
The problem is here .a section overflow. As you bind the .content 400px height. So there are two ways, You could either free from them to bind height or use overflow scroll for .a section. You can compare the previous and fixed code below.
.content {
width: 100%;
/*height: 400px;*/
display: flex;
overflow: auto;
background-color: blue;
}
.a {
width: 165px;
/*height: 100%;*/
flex-grow: 1;
background-color: red;
}
.b {
width: 65px;
display: flex;
padding-top: 20px;
padding-bottom: 20px;
justify-content: center;
background-color: yellow;
/*height: 100%;*/
box-sizing: border-box;
}
.c {
width: 165px;
flex-grow: 1;
margin-right: 15px;
background-color: green;
/*height: 100%;*/
}
<div class="content">
<div class="a">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="b">
<div class="separator">
s
</div>
</div>
<div class="c">
c
</div>
</div>
.content {
width: 100%;
height: 400px;
display: flex;
overflow: auto;
background-color: blue;
}
.a {
width: 165px;
height: 100%;
flex-grow: 1;
background-color: red;
}
.b {
width: 65px;
display: flex;
padding-top: 20px;
padding-bottom: 20px;
justify-content: center;
background-color: yellow;
height: 100%;
}
.c {
width: 165px;
flex-grow: 1;
margin-right: 15px;
background-color: green;
height: 100%;
}
<div class="content">
<div class="a">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took
a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="b">
<div class="separator">
s
</div>
</div>
<div class="c">
c
</div>
</div>
I have a fiddle,
https://jsfiddle.net/thakv1/9zf1tm7q/2/
HTML :-
<div class = "single-page">
<div class="navigation">
<div class ="circle">
1
</div>
</div>
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
CSS:-
.single-page{
display: flex;
flex-flow: row nowrap;
}
.content{
height: 400px;
flex:1;
background-color:white;
}
.navigation{
width : 52px;
}
.circle{
width: 30px;
line-height: 30px;
border-radius: 50%;
text-align: center;
background-color: #295ED9;
color: white;
font-weight: 700;
cursor: pointer;
text-decoration: none;
margin: 20px 10px;
}
In this fiddle the height of navigation is 400px, i want height of navigation equal to height of circle div (around 30px something) not content div.How can we achieve this.
You should add align-self:flex-start to .navigation
.single-page{
display: flex;
flex-flow: row nowrap;
}
.content{
height: 400px;
flex:1;
background-color:red;
}
.navigation{
width : 52px;
background: red;
align-self:flex-start;
}
.circle{
width: 30px;
line-height: 30px;
border-radius: 50%;
text-align: center;
background-color: #295ED9;
color: white;
font-weight: 700;
cursor: pointer;
text-decoration: none;
margin: 20px 10px;
}
<div class = "single-page">
<div class="navigation">
<div class ="circle">
1
</div>
</div>
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
I am unable to force a couple of my elements to be 100% height of the browser window. I want .blank and .sidebar to fill 100% height regardless of how much content they hold (any overflow should be taken care of by using overflow-y: scroll;
Thanks!
JSFiddle
HTML
<body>
<aside class="sidebar about">
<h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h5>
<h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h5>
</aside>
<div class="blank"></div>
<header>
<h1>Header</h1>
</header>
<main>
<h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h5>
<h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h5>
<h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h5>
</main>
<footer>
<h1>Footer</h1>
</footer>
</body>
CSS
html,
body {
height: 100%;
margin: 0;
padding: 0;
position: relative;
background: grey;
color: white;
}
.sidebar {
width: 50%;
height: 100%;
position: absolute;
top: 76px;
right: 0;
margin: 0;
padding: 30px 80px 60px;
z-index: 3;
overflow-y: scroll;
background: black;
}
.blank {
background: linear-gradient(to left, transparent 0%, cyan 75%);
width: 100%;
height: 100%;
opacity: 0.7;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
header {
width: 100%;
height: 28px;
position: absolute;
left: 0;
top: 0;
background: red;
padding: 24px 0px;
z-index: 4;
}
main {
margin: 76px 0 150px 0;
}
footer {
width: 100%;
height: 175px;
left: 0;
bottom: 0;
z-index: 1;
background: yellow;
}
use vh its for viewport height.
so instead of
height: 100%;
use
height: 100vh;
and set fix heights for mediaqueries below ~768px height because especially ios and some other browsers cannot handle it.
see browser which can viewport units
another solution would be with jquery but i dont recommend using jquery for this case.
cannot show you the updated fiddle cause there the rendered page is not the whole viewport..
update:
you need to set the sidebar this css:
.sidebar {
width: calc(50% - 160px);
height: 100vh;
position: absolute;
margin-top: 76px;
right: 0;
margin: 0;
top: 0;
margin-right: -100%;
box-sizing: border-box;
padding: 30px 80px 60px;
z-index: 3;
overflow-y: scroll;
background: black;
-webkit-transition: margin-right 1.2s ease;
transition: margin-right 1.2s ease;
}
greetings timotheus
I want to have the following website style:
The current styles of "OTHER DIV" AND "MOTHER DIV" are displayed in the picture. How do I have to style the other divs like .div_top and .div_bottom so that I get only in .div_bottom a scrollbar if it's needed?
In addition I want that the scrollbar in .div_bottom adjusts itself when .div_top gets bigger (in height):
I think the height of .div_top has to be auto because there is a div inside .div_top which can be hidden and shown with jQuery.
#JonasLoerken
This is your second result. How can I fix this?
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
body {
display: flex;
height: 100%;
flex-flow: row nowrap;
overflow: hidden;
}
.Aside {
width: 200px;
background-color: #333;
}
.Main {
flex: 1;
display: flex;
flex-flow: column nowrap;
}
.Main__header {
height: 40px;
min-height: 40px;
background-color: #777;
}
.Main__content {
overflow-y: auto;
}
<aside class="Aside">#Aside</aside>
<main class="Main">
<header class="Main__header">#Header</header>
<section class="Main__content">
<h1 class="Main__content-header">#Scroll</h1>
<p class="Main__content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>
</main>
Try this:
.wrapper {
height: 100%;
width: 100%;
}
.other-div {
width: 30%;
height: 500px /* User Percent */;
float:left;
background: orange;
display: block;
}
.mother-div {
height: 500px;
width: 70%;
float: right;
background: gray;
}
.top {
height: 30%;
width: 100%;
background: red;
}
.bottom {
height: 70%;
width: 100%;
background: green;
overflow-y: scroll;
overflow-x: hidden;
}
Try it out!
my code:
<div>
<div class='a'> </div>
<footer></footer>
</div>
a:
position: absolute;
left: 0;
bottom: 0px;
height: 105px;
width: 100%;
margin: 0;
background: #f5f5f5;
border-top: solid 1px #afafb6;
z-index: 900;
footer:
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: #F0EEEE;
white-space: nowrap;
it's like this:
-----|---------|
| || |
| a || |
-----| |
| || |
|foo|| |
|ter|| |
-----|---------|
when footer height bigger,how to make div a's height auto smaller.
I tought a way to set footer max-height to 60% ,and a to 40%,but if footer changes ,60% became a bit small
You can use css tables to do this.
FIDDLE 1 and FIDDLE2
Also, you can add a max-height for the footer by wrapping the content in an additional element and setting max-height on that element.
FIDDLE 3 (Be sure to resize the browser window)
Demo
* {
margin:0;
padding:0;
}
html, body {
height:100%;
width:100%;
background: yellow;
}
.wpr {
display:table;
width: 100%;
height: 100%;
}
.a, footer {
width: 100%;
background: yellow;
display:table-row;
}
.a {
background: pink;
height:100%;
}
p {
max-height: 40vh;
}
<div class="wpr">
<div class='a'>a</div>
<footer>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</footer>
</div>