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;
}
Related
Consider the following markup which is also available via this Fiddle:
<!DOCTYPR html>
<html lang="">
<head>
<title>Flex Box Test</title>
<style>
* {
box-sizing: border-box;
position: relative;
}
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
overflow: clip;
}
header,
div {
border-width: 6px;
border-style: solid;
text-align: center;
overflow: clip;
}
header,
#content,
#footer {
padding: 1em;
}
header {
border-color: #090;
background-color: #0c0;
color: #030;
flex: none;
}
#application_container {
border-color: #c90;
background-color: #fc0;
color: #330;
flex: auto;
display: flex;
flex-direction: row;
}
#sidebar {
border-color: #ccc;
background-color: #fff;
color: #999;
flex: none;
width: 150px;
}
#workbench_container {
border-color: #f3f;
background-color: #f6f;
color: #939;
flex: auto;
display: flex;
flex-direction: column;
overflow: clip auto;
}
#content_container {
border-color: #36c;
background-color: #69f;
color: #039;
flex: 1 0 auto;
}
#content {
border-color: #900;
background-color: #c00;
color: #300;
}
#content.small {
min-height: 150px;
}
#content.large {
min-height: 1500px;
}
#footer {
border-color: #999;
background-color: #ccc;
color: #333;
flex: none;
}
</style>
<head>
<body>
<header>The header shall always be visible at the top</header>
<div id="application_container">
<div id="sidebar">This is the sidebar</div>
<div id="workbench_container">
<div id="content_container">
<!-- Toggle the class between "small" and "large" to see the (failing) effect -->
<div id="content" class="small">
This is the real content whose size is unknown in advance.
Hence, it is wrapped into a content container which is at least as large as the actual content,
but can grow such that the footer is at the bottom.
</div>
</div>
<div id="footer">
For small content the footer shall be located at the bottom.
But for large content the footer shall be placed at the end of the content and be scrolled as part of the (pink) workbench container.
</div>
</div>
</div>
</body>
</html>
which should give you the following box layout
The green header at the top and the left sidebar shall always remain at their fixed position of the viewport. The scrollable area shall be the pink box (called workbench_container in the code). As long as the content is small, they footer (grey box) shall be placed at the bottom of the viewable area as shown in the screenshot. But if the content becomes larger, the footer shall be scrolled as part of the pink box.
The markup works as intended for Chrome. But it does not work for Firefox. To test it, toggle the class of div#content between small and large. Firefox does not restrict the height of the pink box, but the height of the pink box grows together with its children (i.e. the content and the footer). Hence, no scrollbar appears.
Firefox shows a scrollbar as soon as div#workbench-container has an explicit (and too small) absolute height, e.g. adding
#workbench_container {
height: 200px;
}
makes a scrollbar appear. But obviously, this is not a solution as I don't know the height in advance. If I set height: 100% nothing changes. According the the CSS specs this should assign the height of the nearest, positioned ancestor which is #application-container.
Is this a Firefox bug or do I miss something? How do make this work in a cross-browser compatible way? If it is a Firefox bug, how do I work around this bug?
As long as the view port is large enough the Firefox Developer tools show something like this:
Content size: 275px
Flexibility (element is growable): +18px
Final size: 293px
However, in the bad case without sufficient space, we get
Content size: 275px
Flexibility (element is shrinkable): -18px
Minimum size: 275px
Final size: 275px
In other words, the box is not shrinking (why?!) and instead a tiny padlock appears in the Firefox Developer Tools.
Additional constraints:
The size of the footer is not known in advance as it shows user-provided content and hence may have several lines of text. Otherwise (if the size would be known), I could imagine a workaround using CSS calc, which is not an option here.
If I've understood your requirements correctly, all you need to do is to add height: 0 to #application_container.
* {
box-sizing: border-box;
position: relative;
}
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
overflow: clip;
}
header,
div {
border-width: 6px;
border-style: solid;
text-align: center;
overflow: clip;
}
header,
#content,
#footer {
padding: 1em;
}
header {
border-color: #090;
background-color: #0c0;
color: #030;
flex: none;
}
#application_container {
border-color: #c90;
background-color: #fc0;
color: #330;
flex: auto;
display: flex;
flex-direction: row;
height: 0;
}
#sidebar {
border-color: #ccc;
background-color: #fff;
color: #999;
flex: none;
width: 150px;
}
#workbench_container {
border-color: #f3f;
background-color: #f6f;
color: #939;
flex: auto;
display: flex;
flex-direction: column;
overflow: clip auto;
}
#content_container {
border-color: #36c;
background-color: #69f;
color: #039;
flex: 1 0 auto;
}
#content {
border-color: #900;
background-color: #c00;
color: #300;
}
#content.small {
min-height: 150px;
}
#content.large {
min-height: 1500px;
}
#footer {
border-color: #999;
background-color: #ccc;
color: #333;
flex: none;
}
<!DOCTYPR html>
<html lang="">
<head>
<title>Flex Box Test</title>
<head>
<body>
<header>The header shall always be visible at the top</header>
<div id="application_container">
<div id="sidebar">This is the sidebar</div>
<div id="workbench_container">
<div id="content_container">
<!-- Toggle the class between "small" and "large" to see the (failing) effect -->
<div id="content" class="large">
This is the real content whose size is unknown in advance.
Hence, it is wrapped into a content container which is at least as large as the actual content,
but can grow such that the footer is at the bottom.
</div>
</div>
<div id="footer">
For small content the footer shall be located at the bottom.
But for large content the footer shall be placed at the end of the content and be scrolled as part of the (pink) workbench container.
</div>
</div>
</div>
</body>
</html>
Whether or not this is a Firefox bug is harder. What Firefox is doing is taking the height of the containing block only if it has a definite size, and is using the height value to decide that, even though it's growing under the flex rules.
I have this code:
html,
body,
#container {
width: 100%;
height: 100%;
}
#container {
display: flex;
background: #ddd;
}
#width {
width: 200px;
height: 100%;
resize: horizontal;
overflow: hidden;
background: #eee;
}
#remaining {
flex-grow: 1;
overflow: scroll;
}
#resize {
width: 200px;
height: 200px;
resize: both;
overflow: hidden;
background: #ccc;
}
<!DOCTYPE html>
<html>
<body>
<div id="container">
<div id="width">Width</div>
<div id="remaining">
<div id="resize">Resize</div>
</div>
</div>
</body>
</html>
Here is what I am trying to make:
You can resize #width
You can resize #resize
The issue is that when I resize #resize, #width shrinks to make room for it.
What I am looking for is when I resize, #remaining shows a scroll bar, and doesn't resize anything else.
I believe that this is happening because #remaining doesn't have a width property, but instead flex-grow. And so it allows it to vary in width, because it doesn't have a set width.
I am looking for a pure HTML/CSS answer, but JavaScript would work too. (of course as long as it is reliable, won't break, and doesn't massively slow down execution using methods such as setInterval)
I also do want to say that I am using a flex layout on #container only for the purpose of making #remaining take up all of the remaining space, and if display: flex is removed, it would still work with the full code that I have.
If you abandon the flex:grow and instead calculate the width of remaining in the css it works.
.remaining{
width: calc(100% - 200px);
overflow-x: auto;
}
With a fiddle
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 2 years ago.
I am making my first web application. It is my first time working with html/css/js. This seems to be a common question/issue with css, but I have trouble understanding/making the solution work. This is the closest I've gotten.
I am struggling to make the app (specifically wrapper or body) encompass only the height of the page (no more or less).
If there is little content, content doesn't extend all the way down and the footer is at the middle of the page. Although, adding height: 100%; to html seems to fix this.
If I add a lot of lines to calendar or sidebar, a scroll bar is added to the whole page instead of only calendar or sidebar. height: 100%; in html doesn't seem to fix this.
The width for content seems to work well.
I have tried changing the height for body and wrapper but it doesn't seem to do anything?
Adding overflow: hidden; to body doesn't seem to work either.
Help is appreciated. Thank you.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
#wrapper {
display: flex;
flex-flow: column;
height: 100%;
}
header {
text-align: left;
flex: 0 0 auto;
padding: 20px;
}
#content {
display: flex;
flex-flow: row;
width: 100%;
flex: 1 1 auto;
}
#sidebar {
float: left;
overflow-y: auto;
padding: 20px;
flex: 0 0 20%;
background-color: #00e7eb;
}
#calendar {
float: left;
overflow-y: auto;
padding: 20px;
flex: 1 1 auto;
background-color: #c8eed6;
}
footer {
text-align: center;
flex: 0 0 auto;
padding: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Journal</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="wrapper">
<header>
<h1 id="currentCalendar">Quarter</h1>
</header>
<div id="content">
<div id="sidebar">
<h4>Calendars</h4>
<button>+ Add Calendar</button>
<h4>Classes</h4>
<button>+ Add Class</button>
<h4>Tags</h4>
<button>+ Add Tags</button>
</div>
<div id="calendar">
<p>No calendar. Click '+ Add Calendar' to make new calendar.</p>
</div>
</div>
<footer>
<p>dg</p>
<button>Donate</button>
</footer>
</div>
</body>
</html>
I would go with min-height: 100vh;. Should be noted though, 100vh can be tricky when it comes to mobile depending on your design. You can also try
html, body { min-height: 100%; }
Try adding height: 100vh; to the target element.
in CSS height % values only work if the parent container has a set height. So if you want to adjust the main body to 100% display height you can do:
body{
height: 100vh; /*viewport-height=100% of screen height*/
}
and then you can set the first child of that to 100%
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>
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