I made a three column layout for my web app where the two left columns form the menu and submenu and the third column is the main viewport. However, the second column (div) isn't scollable when the main viewport is scrollable even though it does show a scroll bar. What am I doing wrong?
<div id="container">
<div id="top" class="clearfix">
Header
</div>
<div id="container_menu">
<ul id="menu">
<li>Menu goes here</li>
</ul>
</div>
<div id="container_submenu">
<div id="submenu">
Submenu goes here
<strong>WHY WON'T THIS DIV SCROLL? (It is showing a scroll bar...)</strong><br />
FILLER<br />
</div>
</div>
<div id="main">
FILLER<br />
</div>
CSS
* {
margin: 0;
padding: 0;
}
.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
zoom:1;
/* For IE 6/7 (trigger hasLayout) */
}
body, td, th {
}
body {
background: #fff;
}
div#container {
min-width: 800px;
/*TODO*/
width: 100%;
}
div#top {
width: 100%;
height: 50px;
background: #000;
color: #fff;
position: fixed;
left: 0;
top: 0;
z-index: 5;
}
/* MENU */
div#container_menu {
background: #666;
position: fixed;
left: 0;
top: 0;
width: 180px;
margin-right: -180px;
height: 100%;
}
ul#menu {
margin-top: 50px;
}
/* SUBMENU */
div#container_submenu {
z-index: -1;
background: #ebeef5;
color: #999;
position: fixed;
left: 180px;
top: 0;
width: 250px;
height: 100%;
margin-right: -250px;
height: 100%;
overflow: scroll;
}
div#submenu {
margin-top: 50px;
}
div#main {
margin-left:430px;
margin-top: 50px;
}
JS Fiddle with CSS
Your z-index on div#container_submenu is -1. The div is being put under the #container div (which is transparent) so you can see the #container_submenu div, but not actually target it. Make the z-index of div#container_submenu 0 and it will fix it.
It's occluded by the #main div. Just remove z-index: -1. http://jsfiddle.net/zephod/4xp2jj3a/
Related
I'm not a css-smarty, I already tried some codes from the internet and stackoverf but still not helping.
How can I fix a div on the left side of page, image can be found down below.
Image: http://prntscr.com/fbhhdi (I selected position with red lines)
If the red outline in your screenshot is, for an example, a div with class="fix-this", then your css would be like this:
.fix-this {
position: fixed;
left: 0;
}
Position fixed will position your div relatively to the viewport.
Left: 0 will place it to the left.
Now, if you also want it to go full height, you can add:
.fix-this {
position: fixed;
left: 0;
top: 0;
bottom: 0;
}
I think it will solve your problem.
body {
background-color: #000;
height: 100%;
padding: 0;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
#wrapper {
height: 100%;
}
.leftCol {
border: 2px solid red;
color: #fff;
float: left;
min-height: 400px;
height: 100%;
width: 250px;
}
.rightCol {
color: #fff;
float: left;
min-height: 400px;
height: 100%;
width: calc(100% - 254px)
}
<hr></hr>
<div id="wrapper" class="clearfix">
<div class="leftCol">
Content Here
</div>
<div class="rightCol">
Content Here
</div>
</div>
I have two independently scrolling divs, one with a header and footer.
<body>
<div class="container col-1">
Many listings
</div>
<div class="container col-2">
<div class="header">Fixed Header</div>
<div class="content">Lots of content</div>
<div class="footer">Fixed footer</div>
</div>
</body>
See this fiddle: https://jsfiddle.net/bhmvv05n/
The problem is, I'd like the second container div to have a fixed header and footer that are always visible and have only the content scrollable.
As soon as I change the scrolling of the col-2 div, the two columns don't scroll independently anymore.
Any advice?
Thanks!
This will adjust to whatever width you have for your columns.
The idea is that you only make .col-2.content scrollable, not the whole .container.
* {
box-sizing: border-box;
}
html, body {
margin: 0;
height: 100%;
}
.container {
height: 100%;
}
.col-1{
float: left;
width: 33%;
overflow: auto;
}
.col-2{
float: left;
width: 67%;
position: relative;
}
.col-2 .content {
position: absolute;
left: 0; right: 0;
top: 20px; /* header height */
bottom: 20px; /* footer height */
overflow: auto;
}
.header, .footer {
height: 20px;
background-color: red;
position: absolute;
left: 0; right: 0;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
Could something like this work for you?
https://jsfiddle.net/vz7eb8uc/
Code changed;
.col-1{
float: left;
width: 33%;
position: relative;
}
.col-2{
float: left;
width: 67%;
position: relative;
}
.header, .footer {
height: 20px;
background-color: red;
position: fixed;
left: 33%;
width:67%
}
First off, similar but never answered questions:
vertically-scrolling-percentage-based-heights-vertical-margins-codepen-exampl
scroll-bar-on-div-with-overflowauto-and-percentage-height
I have an issue with scrolling a center part of the web page while its height needs to be auto.
Here is a fiddle
The header needs to be on top at all times, meaning I don't want the body to become larger than 100%.
However the div #messages can become larger, and that div needs to scroll on its own.
The #messages has a margin-bottom to leave room for the fixed bottom div.
I tried making the div #messages with box-sizing: border-box; and making it height:100% and padding to keep it in place but this was a really nasty looking solution and the scroll bar was the full page height instead of only the inner part.
Any help would be greatly appreciated.
You want something like This
Or maybe - his big brother..
Pure CSS solution, without fixing any height.
HTML:
<div class="Container">
<div class="First">
</div>
<div class="Second">
<div class="Content">
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.First
{
/*for demonstration only*/
background-color: #bf5b5b;
}
.Second
{
position: relative;
z-index: 1;
/*for demonstration only*/
background-color: #6ea364;
}
.Second:after
{
content: '';
clear: both;
display: block;
}
.Content
{
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
You could try the following.
You HTML is:
<div id="container">
<div id="header">The header...</div>
<div id="content">
<div id="messages">
<div class="message">example</div>
...
<div class="message">example</div>
</div>
<div id="input">
<div class="spacer">
<input type="text" />
</div>
</div>
</div>
</div>
Apply the following CSS:
html, body {
height: 100%;
}
body {
margin:0;
}
#header {
background:#333;
height: 50px;
position: fixed;
top: 0;
width: 100%;
}
#content {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 45px;
overflow-y: scroll;
}
#messages {
overflow: auto;
}
#messages .message {
height: 79px;
background: #999;
border-bottom: 1px solid #000;
}
#input {
position:fixed;
bottom:0;
left:0;
width:100%;
height: 45px;
}
#input .spacer {
padding: 5px;
}
#input input {
width: 100%;
height: 33px;
font-size: 20px;
line-height: 33px;
border: 1px solid #333;
text-indent: 5px;
color: #222;
margin: 0;
padding: 0;
}
See demo at: http://jsfiddle.net/audetwebdesign/5Y8gq/
First, set the height of 100% to the html and body tags, which allows you to reference the view port height.
You want the #header to be fixed towards the top of the page using position: fixed, similarly for your footer #input.
The key is to use absolute positioning on #content to stretch it between the bottom edge of the header and the top edge of the footer, and then apply overflow-y: scroll to allow it to scroll the content (list of messages).
Comment
The source code for the #input block may be placed outside of the #content block.
+-------------------+
| Top (fixed) |
+-------------------+
| |
| |
| Middle (fill) |
| |
| |
+-------------------+
| Bottom (fixed) |
+-------------------+
The top and bottom are fixed divs. They are positioned on the top and bottom of browser window. I want the middle part to fill the rest of the window between top and bottom divs.
If it's content is more than its height then i can use scrollbars. But its size should not exceed the window.
My CSS and HTML:
html, body, #main
{
height: 100%;
}
#content
{
background: #F63;
width: 100%;
overflow: auto;
height: 100%;
margin-bottom: -100px;
}
#footer
{
position: fixed;
display: block;
height: 100px;
background: #abcdef;
width: 100%;
}
<div id="main">
<div id="content">xyz</div>
<div id="footer">abc</div>
</div>
From this, the Footer shows in the bottom but, the Content div still fills the whole window which should have been [window-footer] height.
Position the middle div using absolute positioning without specifying height. It does not get much simpler than this:
#header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100px;
background-color: #abcdef;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100px;
background-color: #abcdef;
}
#content {
position: fixed;
top: 100px;
bottom: 100px;
left: 0;
right: 0;
background-color: #F63;
overflow: auto;
}
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
Use "Full page" option to view the snippet properly.
If you don't know the header or footer sizes and you can use CSS3 then i would suggest to use flexbox layouting.
Example below (or check fiddle)
HTML:
<div class="container">
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">bottom</div>
</div>
CSS:
.container {
display: flex;
flex-direction: column;
width: 100%;
height: 400px;
}
.header {
flex-grow: 0;
background-color: red;
}
.content {
flex-grow: 1;
background-color: green;
}
.footer {
flex-grow: 0;
background-color: blue;
}
html
<div id="main">
<div id="header"> Header Content</div>
<div id="content">
<ul><li>Hello World!!! </li>
<li>Hello World!!! </li>
<li>Hello World!!! </li>
<li>Hello World!!! </li>
<li>Hello World!!! </li>
</ul>
</div>
<div id="footer">I am Footer
</div>
css
body { margin: 0;}
#main{
position: absolute;
width: 100%;
top: 0;
bottom: 0;}
#header
{
position: absolute;
height: 41px;
top: 0;
left: 0;
right: 0;
text-align:center;
display:block;
background: blue;
}
#content
{
position: absolute;
top: 41px;
bottom: 0;
left: 0;
right: 0;
overflow:scroll;
}
#footer
{
position: absolute;
height: 41px;
bottom: 0;
left: 0;
right: 0;
text-align:center;
display:block;
background: blue;
}
li{
text-decoration: none;
display: block;
height: 20px;
width: 100%;
padding: 20px;
}
JSFIDDLE Demo
I think this is what u want...
JSBin: http://jsbin.com/ebilag/1/
CSS:
html, body {
top: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.top {
position: fixed;
top: 0;
width: 100%;
height: 100px;
background: yellow;
}
.bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
background: grey;
}
.middle {
padding-top: 100px;
padding-bottom: 100px
}
HTML:
<div class="container">
<div class="top">Top</div>
<div class="middle">Middle</div>
<div class="bottom">Bottom</div>
</div>
If you know the height of the header and the footer...
then you could do this easily with the box-sizing property.
Like so:
FIDDLE1 FIDDLE2
.container
{
height: 100%;
background: pink;
margin: -64px 0;
padding: 64px 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.content {
overflow:auto;
height:100%;
}
header
{
height: 64px;
background: purple;
position: relative;
z-index:1;
}
footer
{
height: 64px;
background: gray;
position: relative;
z-index:1;
}
The solution with top and bottom padding is ok but I would suggest a different approach where the main frame is designed as table. This is more flexible and you can hide head or foot without changing the css.
STYLUS (CSS):
html,
body
height: 100%
.container
display: table
height: 100%
.head,
.foot,
.content
display: table-row
box-sizing: border-box
.head,
.foot
height: 70px
background: #ff0000
.content
overflow: auto
.scroll
height: 100%
overflow: auto
box-sizing: border-box
HTML:
<div class="container">
<div class="head">...</div>
<div class="content">
<div class="scroll">...</div>
</div>
<div class="foot">...</div>
</div>
HTML:
<div id="main">
<div id="header">I am Header
</div>
<div id="content">I am the Content
</div>
<div id="footer">I am Footer
</div>
</div>
CSS:
#main{width:100%;height:100%;}
#header
{
position:relative;
text-align:center;
display:block;
background:#abcdef;
height:40px;
width:100%;
}
#content
{
background: #F63;
width:100%;
text-align:center;
height:auto;
min-height:400px;
}
#footer
{
position:relative;
text-align:center;
display:block;
background:#abcdef;
height:40px;
width:100%;
}
DEMO
In my opinion you should use js/jquery to change the #content height during page load.
This should be something like this (I haven't tested code below, so change it as you need):
$().ready(function(){
var fullHeight= function(){
var h=$(window).height()-100; //100 is a footer height
$('#content').css('min-height',h+'px');
};
$(window).resize(fullHeight);
fullHeight();
});
Please try this:
HTML
<div id="header">
header
</div>
<div id="content">
main content
</div>
<div id="footer">
footer
</div>
CSS
html,body{
marign: 0;
padding: 0;
height: 100%;
}
#header {
height: 100px;
position: fixed;
top: 0;
left:0;
right: 0;
background: orange;
}
#footer {
height: 100px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: green;
}
#content {
padding-top: 100px;
padding-bottom: 100px;
height: -webkit-calc(100% - 200px);
height: -moz-calc(100% - 200px);
height: -ms-calc(100% - 200px);
height; -o-calc(100% - 200px);
height: calc(100% - 200px);
background: #ccc;
}
please view the demo.
I'm trying to create a 3 columns layout in css with a togglable one. The following scheme should explain it better than words.
I want the 3 columns be full height.
In red: A static width column
In green: A togglable menu
In dark green: The menu after being toggled
In white: The main container which should fill the rest of the page
I've tried to do it with the following code but without success:
<div id="header"></div>
<div id="inline_container">
<div id="left_menu"></div>
<div id="toggle_menu"></div>
<div id="main_container"></div>
</div>
And with this css code:
* {margin: 0; padding: 0;}
.body {height: 100%; width: 100%;}
#header {height: 70px; width: 100%;}
#inline_container {height: 95%; width: 100%;}
#left_menu {height: 100%; width: 80px; display: inline-block; float: left;}
#toggle_menu {height: 100%; width: 150px; display: inline-block; float: left;}
#main_container {height: 100%; width: 100%; display: inline-block; float: left;}
Did you want something like this?
http://jsfiddle.net/Kcfde/
I've added jQuery script to show toggle effect, just click the green div.
Basically, when you set float and width, elements should remain with display: block, as they'll fit in into content.
Working FIDDLE Demo
For creating full height page, you need a wrapper:
<div id="wrapper">
<!-- MARKUP -->
</div>
That will fill the whole page:
#wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Inside our wrapper, we create our wanted elements:
<div id="wrapper">
<div id="red"></div>
<div id="lime">
<div id="green"></div>
<span class="close">[X]</span>
</div>
<div id="white">
TEXT
</div>
</div>
Note that the green element is a child of lime element. If lime get class collapsed, all data
will be hidden and the green one will be display. Here is the CSS:
#wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#red {
float: left;
width: 200px;
height: 100%;
background: red;
}
#green {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 30px;
background: green;
display: none;
cursor: pointer;
}
#lime .close {
position: absolute;
top: 10px;
right: 10px;
width: 20px;
height: 20px;
background: pink;
cursor: pointer;
}
#white {
height: 100%;
background: gray;
}
#lime {
position: relative;
float: left;
width: 200px;
height: 100%;
background: lime;
transition: width 0.5s;
}
#lime.collapsed {
width: 30px;
}
#lime.collapsed * {
display: none;
}
#lime.collapsed #green {
display: block;
}
And for closing and opening the lime element, we need some JS (I used jQuery):
$(function () {
$('#lime .close').on('click', function () {
$('#lime').addClass('collapsed');
});
$('#green').on('click', function () {
$('#lime').removeClass('collapsed');
});
});
You can see the final FIDDLE Demo.