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>
Related
I'm trying to achieve a website design which basically has two parts. The top-part, where the menu of the site is and the content-part, with the information.
.wrap {
position: absolute;
width: 100%;
height: 100%;
}
.box {
display: flex;
flex-direction: column;
height: 100%;
}
.top {
flex: 0 1 auto;
}
.content {
flex: 1;
position: relative;
height: 100%;
}
<div class="wrap">
<div class="box">
<div class="top"></div>
<div class="content"></div>
</div>
</div>
The menu-div should be as big as needed for the menu-content to be displayed and the content-div should fill the rest of the site. Both together should fill 100% in width and 100% in height.
So, this construct works fine on desktop PCs, however - on mobile browsers for Chrome, Firefox, and Safari, the site's height gets extended by the menu's height.
The content is at 100% plus the menu. Can someone please explain to me what I'm doing wrong here?
The Basics
In order to give elements percentage heights, their parents need a defined height. What can be confusing, is that these parents include <html> and <body> Consider this example:
html,body {
height: 100%;
margin: 0;
}
div {
height: 100%;
background: lightgreen;
}
<div></div>
Here the <html>, <body> and <div> elements have both been given height: 100%. This trickles down to each child element:
<html> is 100% of the browser viewport
<body> is 100% of its <html> parent
<div> is 100% of its <body> parent
We can simplify this and give the <body> element 100% height using a viewport height unit. This reduces complexity as we no longer need to worry about <html>. Consider this example:
body {
height: 100vh;
margin: 0;
}
div {
height: 100%;
background: lightgreen;
}
<div></div>
Here the <body> takes up 100% of the viewport height and its children can be given percentage heights. We don't need to define a height for <html>.
What You Want to Achieve
With this in mind, we can strip your example down to the basics. Here is exactly what you have described using as few elements as needed:
The <body> can be the flex container. It gets:
display: flex and flex-direction: column
margin: 0 to remove the default body margin.
height: 100vh to stretch it to 100% of the viewport height.
The <div class="top"> is your header that will contain your menu. We don't need to give it a flex property as it will shrink to fit its contents with the initial flex values it is given.
The <div class="content"> is given flex: 1 to grow and fill the rest of the available space.
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.top {
background: pink;
}
.content {
flex: 1;
background: lightgreen;
}
<div class="top">Menu Content<br>Menu Content<br>Menu Content</div>
<div class="content"></div>
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;
}
Here is a simple piece of code, resulting in blue span element overflowing out of yellow and black box.
I know, I can use overflow property to hide/scroll it, but I rather need to resize the #inner and #outer containers to cover it (so that scrollbar would rather be on whole page instead of in the containing div). Is there any way?
The content ( = width) of "blue span" is dynamicly generated from application?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<style type="text/css">
#outer {background: black; width: 300px; margin: 10px auto; padding: 20px; }
#inner {background: yellow; min-width: 200px; height: 200px; }
#inner span { background: blue; display: block; width: 400px; }
</style>
<div id="outer">
<div id="inner">
<span> </span>
</div>
</div>
</html>
If you want the two outer boxes to resize dynamically based on the content thats inserted in the span, you will have to reconsider your approach. All boxes that scale dynamically cannot have a width defined, so they cannot be centred using the margin: auto. However, it is possible to achieve the same effect by wrapping the whole thing into another box that covers the full width of the page, text-align centring that box and then making the outer box displayed inline-block. This is the code that works. Now you can add a min-width to the content box if you want and it will scale nicely. Heres some code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<style type="text/css">
#wrap {
width: 100%;
text-align: center;
}
#outer {
display: inline-block;
background: black;
margin: 10px 0;
padding: 20px;
}
#inner {
background: yellow;
height: 200px;
}
#inner span {
background: blue;
display: block;
}
</style>
<div id="wrap">
<div id="outer">
<div id="inner">
<span> </span>
</div>
</div>
</div>
</html>
I think so you can add % units for your divisions to make it as perfect
Here is the CSS
#outer {background: black; width: 300px; margin: 10px auto; padding: 20px; }
#inner {background: yellow; min-width: 200px; height: 200px; }
#inner span { background: blue; display: block; }
Here is the fiddle
http://jsfiddle.net/mohamedmusthafac/n6CEx/
I think so this is what you are expecting for??
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Make a div fill the space
How can I make an inner div extend to 100% of the container size? Please consider the example below where I want .footer to be 100% of the actual .wrapper size (which is 500px due to the .content inner element that has a width of 500px).
<html>
<head>
<style type='text/css'>
.wrapper {
width: 300px;
text-align: center;
overflow: auto;
}
.content {
width: 500px;
background-color: green;
}
.footer {
background-color: grey;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">PAGE CONTENT</div>
<div class="footer">FOOTER (should be 100%)</div>
</div>
</body>
</html>
If you take a look at http://jsfiddle.net/6at8Q/ and scroll right you will see that the grey bar will not extend.
The .wrapper is 300px, and .footer is a child of .wrapper. By default this will mean that the .footer is 300px. You have made your .content div 500px wide which is extending the .wrapper. Make the wrapper 500px or distinguish what width you actually want your content to be.
.footer {
background-color: grey;
width: 100%;
}
Beside this you should also edit your .wrapper class for perfection.
.wrapper {
width: 500px;
text-align: center;
overflow: auto;
}
Your code must be changed like this:
<html>
<head>
<style type='text/css'>
.wrapper {
width: 500px; /* <~~ This is changed from 300 to 500px */
text-align: center;
overflow: auto;
}
.content {
width: 500px;
background-color: green;
}
.footer {
/* width: 100%; <~~ You can add This line, but its not important, because a div tag always is 100% of its parent width */
background-color: grey;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">PAGE CONTENT</div>
<div class="footer">FOOTER (should be 100%)</div>
</div>
</body>
</html>
Or you can Do this:
.wrapper {
/* width: 500px; <~~ Delete This line */
text-align: center;
overflow: auto;
}
.content {
/* width: 500px; <~~ Delete This line too */
background-color: green;
}
.footer {
background-color: grey;
}
Then the .wrapper div extends to the page width (100% of body).
I've edited your fiddle check out http://jsfiddle.net/mAqJC/
Edit the width of the wrapper and everything should follow
Why in the following example the height of the inner div is not like wrapper's div ?
Live demo here.
HTML:
<div class="wrapper">
<div class="inner">Hello</div>
<div class="inner">Peace</div>
</div>
CSS:
.wrapper {
background-color: #000;
min-height: 100px;
}
.inner {
display: inline-block;
background-color: #777;
height: 100%;
}
If I change min-height: 100px; to height: 100px;, then it looks OK. But, in my case, I need min-height.
Some properties in CSS inherit the value of the parent automatically, some don't. Minimum height must be explicitly stated when you want it to inherit the parent's value:
min-height: inherit;
I believe this is the output you want: http://jsfiddle.net/xhp7x/
.wrapper {
display: table;
background-color: #000;
height: 100px;
width: 100%;
}
.wrapper2 {
height: 100%;
display: table-row
}
.inner {
height: 100%;
display: inline-block;
background-color: #777;
margin-right: 10px;
vertical-align: top;
}
Had to add a second DIV wrapper2.
Tested on chrome and firefox.
You want to specify both, CSS height is not the same as min-height. You want to specify both height and min-height.
height = When used as a %, this is a percent of the window height
min-height = as you drag the window smaller, the DIV with a % height will continue to reduce until it hits the min-height
max-height = as you drag the window larger, the DIV with a % height will continue to increase until it hits the max-height
http://jsfiddle.net/gpeKW/2/ I've added a sample here with borders.
Slight change to the answer from your comment, you are pretty much correct from your original CSS.
The below HTML will have a minimum div height of 100px. As the size of the inner DIV increases, the wrapper will automatically expand. I have demonstrated this by adding a style attribute to the first inner class.
<html>
<head>
<title>Untitled Page</title>
<style type="text/css">
.wrapper
{
background-color: #000;
min-height:100px;
}
.inner
{
display: inline-block;
background-color: #777;
height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="inner" style="height:200px">test</div>
<div class="inner">Peace</div>
</div>
</body>
</html>
I know one way to set the div child height the same as its parent div height is to use relative for the parent and absolute position for the child.
.wrapper {
background-color: #000;
min-height: 100px;
position: relative;
}
.inner {
display: inline-block;
background-color: #777;
position: absolute;
height: 100%;
}
But this way will cause some problem, you have to adjust the child element so that it will be displayed properly
P/s: Why don't you set it to the same height as its parent height? I mean, 100% is not x%... just thinking..
Anyway, happy coding ;)
I certainly joined answers and the result using 'min-height' for the -main HTML tag- (class = "main-page-container"):
HTML:
<div id="divMainContent">
<!-- before or after you can use multiples divs or containers HTML elements-->
<div> </div>
<div> </div>
<main class="main-page-container">
<div class="wrapper">
1
<div class="wrapper2">
2
<div class="child">3</div>
</div>
</div>
</main>
<!-- before or after you can use multiples divs or containers HTML elements-->
<div class="footer-page-container bg-danger" > more relevant info</div>
</div>
CSS:
/*#region ---- app component containers ---- */
#divMainContent {
height: 100%;
display: flex;
flex-direction: column;
/*optional: max width for screens with high resolution*/
max-width: 1280px;
margin:0 auto;
}
.main-page-container {
display: inline-table;
height: 70%;
min-height: 70%;
width: 100%;
}
.footer-page-container{
flex:1; /* important in order to cover the rest of height */
/* this is just for your internal html tags
display: flex;
flex-direction: column;
justify-content: space-between; */
}
/*#endregion ---- app component containers ---- */
.wrapper {
background: blue;
max-width: 1280px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
}
.wrapper2 {
width: 90%;
margin: auto;
background: pink;
display: flex;
flex-wrap: wrap;
gap: 20px;
height: 90%;
}
.child {
min-height: 100px;
min-width: 300px;
background: orange;
position: relative;
width: 33%;
}