<html>
<body>
<div class="container">
<div class="menu"></div>
<div class="list"></div>
</div>
</body>
</html>
.menu{
float:left;
width:50%;
}
.list{
float:right;
width:50%;
}
how to disable the whole html's scroll. but the menu div and list div can scroll vertically?
and dependently?
I mean when I scroll the left div the right div do not have to scroll together.
You need to start from the html tag down. It and all parents of your scrollable elements should have the height of the viewport.
This means that the html, body, .container and both scrollable elements should have a height: 100% or height: 100vh.
Then you can make the scrollable elements actually scroll independently by adding overflow: hidden.
If this doesn't make sense, please see this pen which I made for you.
You need to prevent vertical scrolling on your .container. This can be done by using the overflow CSS property. Look at the code below on how you can achieve this and also enable vertical scrolling for your two elements (.list and .menu).
body {
margin: 0;
padding: 0;
}
.container {
max-height: 100vh;
height: 100vh;
overflow-y: hidden;
display: flex;
}
.menu {
overflow-y: auto;
width:50%;
}
.list {
overflow-y: auto;
width:50%;
}
Related
I have a very simple flexbox structure with a header, main and footer child elements, where the footer is ending item and plays the role as a sticky footer to stay on the bottom of the page on long pages. But whenever the window is shrunk (height), the footer overlaps all the content (other siblings) like it would have a fixed position property.
I would like it to have a default behavior and be equal to others which are hidden when site height is too small for current last item to be shown.
My structure:
HTML
<div id="main">
<div id="alternate_header"></div>
<div id="header">
<div>1</div><div>2</div>
</div>
<div id="content">body</div>
<div id="footer">footer</div>
</div>
CSS
body,html {
margin: 0;
height:100vh;
}
#main {
display:flex;
flex-direction: column;
width:100%;
height:100vh;
min-height:0;
}
#main > div {
width: 100%;
}
#alternate_header {
display; none;
}
#header {
background-color:red;
height:5rem;
line-height:5rem;
align-self:flex-start;
display:flex;
flex-direction:row;
}
#header > div {
flex:1;
}
#content {
flex:1;
background-color:#dcdcdc;
min-height:0;
}
#footer {
align-self:flex-end;
background-color: yellow;
height: 4rem;
}
JSFIDDLE
The problem is caused by setting a fixed height on your containers: html, body and #main. This means that the height of your flexbox container will always be exactly 100vh: the height of the viewport.
Your #footer element has align-self: flex-end. This means that it will align itself to the end of your flex container: the bottom of the page.
You can have the same effect of ensuring that the page covers the whole screen, while allowing the page to grow and the footer to move with it, by replacing:
height: 100vh;
with:
max-height: 100vh;
in html, body & #main.
In addition, the header and footer will naturally align to the start and end as that's where they are in the DOM. Feel free to remove the align-self rules.
i can make full height divs but if content is longer than screen, div stays 100%, dont be full height.
so, i want to full height fixed div.
but i cannot do fixed.
i using this style;
<div id="left">
content
</div>
<div id="right">
content
</div>
and css;
html,body {height: 100%;background:#fff}
#left {height: 100%; width:200px; position:absolute; top: 0; left:0; background: black;}
#right {height: 100%; margin-left:200px; background: red;}
this is the result after i write too long content in #right div.
https://jsfiddle.net/hq21zmq8/
as you see, if content is longer than div, div isnt growing longer. how can i do fixed height ?
Add overflow: scroll if you want scrollbar
#right {height: 100%; margin-left:200px; background: red; overflow: scroll;}
or
overflow: auto
if the scrollbar should be hidden when not needed. as #Sverri M. Olsen said :)
You want to take a look in the overflow attribute in the css.
overflow: auto;
or if you always want a scroll bar
overflow: scroll;
should do the trick
Add overflow: scroll; property
https://jsfiddle.net/hq21zmq8/7/
Add the following: overflow-y: auto
This should add a scrollbar if needed only.
Another thing is, I always use height: 100vh. Easier to work with in my opinion... But that's just a personal matter.
Use min-height property if You want div to grow
#right {min-height: 100%; margin-left:200px; background: red;}
Or overflow if You want scrollbar
#right {height: 100%; margin-left:200px; background: red;overflow: auto;}
add overflow-y:scroll to #right like
#right {
height: 100%;
margin-left:200px;
background: red;
overflow-y:scroll;
}
Is there a scrollbar element in HTML ?
If not, how can a scrollbar be created? I tried using a div with overflow but the problem is that I have to add content in order for the scrollbar to appear, and if I add content it will be visible.
CSS:
.h-scrollbar {
overflow-x: scroll;
width: 300px;
}
.h-scrollbar div {
width: 1000px;
display:block;
}
HTML:
<div class="h-scrollbar"><div>text</div></div>
Here is a demo: http://jsfiddle.net/4e8jbbc0/1/
How can I get only the scrollbar?
You can use the below css class to hide text and get scroll bar element only
.h-scrollbar div {
width: 1000px;
display:block;
visibility: hidden;
height:0px
}
I have a page that has a header, content, and footer. The header and footer are of fixed height, and I'd like the content to adjust its height so that it fits dynamically between the header and footer. I am planning to put a background-image in my content, so it is critical that it actually fills the rest of the unoccupied vertical space.
I used the Sticky Footer approach to ensure that the footer remains on the bottom of the page. This however does not make the content span the entire height of the remaining space.
I have tried several solutions which involved me adding height:100%, height:auto; position:relative but it did not work.
html,
body {
height: 100%;
background-color: yellow;
}
header {
width: 100%;
height: 150px;
background-color: blue;
}
header nav ul li {
display: inline;
padding: 0 30px 0 0;
float: left;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 0 -30px 0;
/* the bottom margin is the negative value of the footer's height */
position: relative;
}
#wrapper #content {
background-color: pink;
width: 400px;
height: 100%;
margin: 0 0 -30px 100px;
padding: 25px 30px 25px 30px;
}
footer {
margin: -30px 0 0 0;
width: 100%;
height: 30px;
background-color: green;
}
<div id="wrapper">
<header>
<div id="logo"></div>
<nav>
<ul>
<li>About</li>
<li>Menu</li>
<li>Specials</li>
</ul>
</nav>
</header>
<div id="content">
content
<br>goes
<br>here
</div>
</div>
<footer>footer</footer>
The trick about height:100% is that it requires all of the parent containers to be have their heights set as well. Here's an html example
<html>
<body>
<div id="container">
</div>
</body>
</html>
in order for the container div with a height set to 100% to expand dynamically to the height of the window you need to make sure that the body and html elements have their heights set to 100% as well. so...
html
{
height: 100%;
}
body
{
height: 100%;
}
#container
{
height: 100%;
}
would give you a container that expands to fit your window. then if you need to have footer or header that floats above this window you can do so with z indexing. This is the only solution I've found that fills the vertical height dynamically.
I'm providing a slightly more general solution so it is more useful for others reading this answer and wondering how to apply it to their site.
Assuming you have three divs:
<div id='header'></div>
<div id='contents'></div>
<div id='footer'></div>
where #header is fixed and may have variable height, #contents should consume all remaining vertical space and #footer is fixed and may have variable height you can do:
/* Note you could add a container div instead of using the body */
body {
display: flex;
flex-direction: column;
}
#header {
flex: none;
}
#contents {
flex: 1;
height: 100%;
overflow-y: scroll;
}
#footer {
flex: none;
}
Note that this will allow the contents to scroll vertically to show it's whole contents.
You can read more about display:flex here.
Try changing your css to this:
html,
body {
height: 100%;
background-color: yellow;
}
header {
width: 100%;
height: 150px;
background-color: blue;
}
header nav ul li {
display: inline;
padding: 0 30px 0 0;
float: left;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 0 -30px 0;
/* the bottom margin is the negative value of the footer's height */
position: relative;
}
#content {
background-color: pink;
width: 400px;
padding: 25px 30px 25px 30px;
position: absolute;
bottom: 30px;
top: 150px;
margin-left: 100px;
}
footer {
margin: -30px 0 0 0;
width: 100%;
height: 30px;
background-color: green;
}
<div id="wrapper">
<header>
<div id="logo"></div>
<nav>
<ul>
<li>About</li>
<li>Menu</li>
<li>Specials</li>
</ul>
</nav>
</header>
<div id="content">
content
<br>goes
<br>here
</div>
</div>
<footer>footer</footer>
You probably don't want to be setting the width, padding, margins, ect. of the wrapper. Also, with absolute positioning you can pull the bottom and top of the content to where you want them.
Here's what you are after, I think.
I spend several hours trying to figure this out too and finally have a robust solution without hacks. However, it requires CSS3, which requires a modern browser to support it. So, if this constraint works for you, then I have a real solution for you that works.
http://jsfiddle.net/u9xh4z74/
Copy this code into your own file if you need proof, as the JSFiddle will not actually render the flexbox correctly as embedded code.
Basically, you need to
- set the target container to 100% height, which you seem to already know
- the parent container you set display: flex and flex-direction: vertical (you'll see in the JSFiddle I've also included the alternate styles that do the same thing but are needed for cross browser support)
- you can let the header and footer be their natural heights and dont need to specify anything in that regard
- in the container you want to fill up the remaining space, set flex: 1. You're set! You'll see it works exactly as you semantically have intended. Also in the JSFiddle, I included overflow: auto to demonstrate that if you have even more text than the screen can handle, scrolling works as you would want it to.
<div style="display:flex; flex-direction:vertical;">
...header(s)...
<div style="flex: 1; overflow: auto;">
As much content as you want.
</div>
...footer(s)...
</div>
As a side note, I pursued the option of trying to do this same thing using display: table. It works just fine as well, except that overflowed content does not work as you would expect, instead overflowed content simply expands the container to the size of the content, which I'm pretty sure is not what you want. Enjoy!
Use display:table and display:table-row
Set height:0 for normal divs and height:auto for div that should fill vertical space. Insert a div with {height:100%; overflow-y:auto} into the vertical filler to if the containers height shouldn't expand beyond its preset height.
Behold the power of display:table!
<div style="height:300px;">
<div style="display:table; height:100%; width:100%;border: 1px solid blue;">
<div style="display: table-row; height:0; padding:2px; background-color:yellow;">
Hello
</div>
<div style="display: table-row; height:auto; padding:2px; background-color:green;">
<div style="height:100%; overflow: auto;">
<div style="height: 500px"></div>
</div>
</div>
<div style="display: table-row; height:0; padding:2px; background-color:yellow;">
Gbai
</div>
</div>
</div>
There is no 100% height from 100% continer height exactly. You can't solve it this way. Likewise while using mix of height + margin + padding. This is way straight to hell. I suggest you to take a look for tutorials which are sloving this page layout.
I have following html site structure:
<body>
<div id="header"></div>
<div id="container">
<div id="util_header"></div>
<div id="contentwrapper" class="frontpage">Content</div>
</div>
</body>
Now I want to center the #container. The works when I apply following css:
#container {
width: 960px;
margin: auto;
background:red;
}
#util_header{
width: 100%; height:32px;
position: relative;
background:url('../images/logo.png') no-repeat #eeeeee;
border-top:1px solid #b6bac0;
}
#header {
width: 100%; height:32px;
position: absolute;
background:#eeeeee;
border-top:1px solid #b6bac0;
}
#contentwrapper {
float: left;
position: relative;
height: auto;
background:red;
}
The magin: auto; centers the container. My problem is that I need the container to be larger, but when I increase width from 960 to 980 I get a vertical scrollbar. I played around with the css but got no clue how to manage that problem.
Any ideas?
#ArtWorkAD,
CSS3 introduced the Flexible box model, maybe you can use it depending the audience of your website...
So to Vertically & Horizontally center block Level elements in the body element, you'd just have to write this CSS declaration:
body {
display: box;
box-orient: horizontal;
/* horizontally centered */
box-pack: center;
/* vertically centered */
box-align: center;
width: 100%;
height : 100%;
}
http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
edit
To have wide browser support, you can always rely on CSS hacks and do some negative margin trickery as seen on http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
;)
Oh and if you don't want a scrollbar at all, make sure you have put an overflow:hidden on the body element.