I have my left and right column which needs to have a vertical scroll-bar. How can I achieve the the scrolling without specifying height: 100%
html,body{height:100%;}
.row > .sidebar-fixed {
position: relative;
top: 0;
left:auto;
width: 220px;
height: 100%;
background: #F5F5F5;
overflow-y: scroll;
}
.left {
float:left;
}
.right {
float:right;
}
.fixed-fixed {
margin: 0 240px;
}
The problem is to ensure I need a scroll-bar in my both div's, I have to end up specifying height for all my parent which causes issue in other layouts. Is there anyway we can bring the scroll-bar without using the height: 100% value.
http://www.bootply.com/FFZWQoCSJE
Try this
.row > .sidebar-fixed {
position: relative;
top: 0;
left:auto;
width: 220px;
height: 120px;
background: #F5F5F5;
overflow-y: scroll;
}
And remove {height:100%;} from html,body in your CSS
You could use fixed positioning instead:
.row > .sidebar-fixed {
position: fixed;
top: 0;
bottom:0;
width: 220px;
background: #F5F5F5;
overflow-y: scroll;
}
.left {
left:0;
}
.right {
right:0;
}
Example
Related
All answers are not helping me.
Please see here: https://jsfiddle.net/prg5hc9m/1/
#main {
width: 300px;
height: 400px;
position: relative;
}
#main1 {
position: absolute;
float:left;
}
#main2 {
position: absolute;
overflow-y: scroll;
height: inherit;
float:left;
width: 50%;
}
I want main2 to be under main1.
Not very clear on what you need but you cant use absolute with float. If you remove the absolutes on both the scroll section appears under the other.
updated fiddle: https://jsfiddle.net/prg5hc9m/3/
#main {
top: 20px;
left: 20px;
width: 300px;
height: 400px;
position: relative;
display:block;
}
#main1 {
float:left;
}
#main2 {
clear:left;
overflow-y: scroll;
height: 300px;
float:left;
//top: 10%;
width: 50%;
}
By 'under', I'm assuming you mean 'behind'. In order to do that, you need to add a z-index. Z-indexes start at zero, so simply give your #main1 div a z-index of 1 to have it appear 'on top':
#main1 {
z-index: 1;
}
I've created an updated fiddle here.
Hope this helps! :)
Use inline-block.
#main {
top: 20px;
left: 20px;
width: 300px;
height: 400px;
position: relative;
display:block;
}
#main1 {
display: inline-block;
float:left;
height: 50px;
}
#main2 {
clear:left;
display: inline-block;
overflow-y: scroll;
height: 300px;
float:left;
//top: 10%;
width: 50%;
}
Hello Stack overflow users.
I'm in a bit of a struggle here, I have 4 divs.
I would like for div 4 to have it's width adjusted if the screen size is adjusted. Basically just stay within the other divs, and adjust.
Div 1,2 and 3 all have position:fixed to avoid them from moving when a user scrolls on the page.
But whatever I try, with width:autoETC. div 4 keeps going the full length behind div 3. I have a margin set for it to pass by div 1's width length.
I've been having a hard time wrapping my head around this one, the code for my divs are listed below.
.navbar-left {
position: fixed;
width: 325px;
top: 0px;
bottom: 0;
z-index: 1001;
height:auto;
}
.navbar-top{
width:100%;
height:60px;
position:fixed;
top:0;
z-index:1002;
}
.navbar-right{
width: 365px;
top:0;
height:100%;
position:fixed;
right:0;
}
Div 4 is not listed, as the code did not work. Any help is greatly appreciated.
Try this fiddle
If you need to use position fixed (really I didn't understand why) you could use percentage for main div, and pixels for sidebars.
In main div to set the width use this:
width: calc(100% - 400px);
Where 400px is the sum of the width of your both sidebars
HTML
<div clas="container">
<div class="top">top</div>
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
CSS
.container {width: 100%; height: 100%;}
.top {
position: fixed;
clear: both;
width: 100%;
height: 20%;
background-color: #d5d5d5;
}
.left {
position: fixed;
top: 20%;
width: 40px;
float: left;
height: 80%;
background-color: green;
}
.main {
width: calc(100% - 80px);
height: 80%;
position: fixed;
top: 20%;
left: 40px;
background-color: grey;
}
.right {
width: 40px;
height: 80%;
position: fixed;
top: 20%;
right: 0;
background-color: green;
}
Try this code...
.div4{ width:calc(100% - 730px);
background-color: green;
margin:0 auto;
position:relative;
top:60px;}
where 730px is sum of left and right div widths...
Use percents for navbar-left, navbar-right and the middle portion.
Do not forget to set top:60px (height of navbar-top) for the left and right divs.
jsFiddle Demo
/* *CSS:* */
div {
position: relative;
box-sizing: border-box;
}
.navbar-top {
position: fixed;
width: 100%;
height: 60px;
top: 0;
left: 0;
z-index: 2;
}
.navbar-left {
position: fixed;
width: 20%;
height: 100%;
top: 60px;
left: 0;
z-index: 1;
}
.navbar-right {
position: fixed;
width: 20%;
height: 100%;
top: 60px;
right: 0;
}
.myBody {
width: 60%;
margin: 60px auto 0px;
}
.navbar-top {
background: blue;
}
.navbar-left {
background: red;
}
.navbar-right {
background: green;
}
.navbar-top {
background: wheat;
}
<!-- **HTML:** -->
<div class="navbar-top">navbar-TOP</div>
<div class="navbar-left">navbar-LEFT</div>
<div class="navbar-right">navbar-RIGHT</div>
<div class="myBody"> My body lies over the ocean... hummmmm </div>
Give each a width that will equal to 100%. Give left div 20% div 4 60% and right div 20%. Or, with existing code, give 4th div 100%.
I have an easy and stupid problem. I'm trying to fit a div under another div with height:100% without producing overflow, just fitting in body's height.
Example not working: https://jsfiddle.net/L38cea2s/1/
HTML:
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
CSS:
html, body {
height:100%;
}
#top {
width:100%;
height:50px;
background-color:red;
}
#left {
width:70%;
height:100%;
background-color:green;
float:left;
display:block;
}
#right {
width:30%;
height:100%;
background-color:yellow;
float:right;
display:block;
position:absolute;
}
I don't know why on jsfiddle my divs are not ocuppying 100% of width's body. But as you can see on the example, there's overflow because there's another div above both divs. I don't want an overflow:hidden.
Thanks!
Edit:
I'm searching for something like this: (Any div is behind any div)
This jQuery might help
var body = $('body').height();
var top = $('#top').height();
var workoutheight = body - top;
$('#left').css('height',workoutheight);
$('#right').css('height',workoutheight);
https://jsfiddle.net/L38cea2s/7/
I did a CSS only solution
Get the updated markup from JSFiddle
CSS
body {
margin: 0;
}
.sidebar {
width: 20%;
float: left;
background: #B2B200;
height: 100vh;
}
.main-content {
width: 80%;
float: left;
height: 100%;
}
.top {
height: 20%;
width: 100%;
background: #26FF5C;
height: 20vh;
}
.left {
width: 70%;
float: left;
background: #4DFFFF;
height: 80vh;
}
.right {
width: 30%;
float: left;
background: #8500B2;
height: 80vh;
}
https://jsfiddle.net/aq8awrnz/
You can use calc in your CSS as well... Example:
#left {
height: 100vh;
width: 300px;
float:left;
}
#top {
height: 45px;
width: calc(100vw - 300px); // or calc(100% - 300px)
margin: 0 0 0 300px;
}
#right {
height: calc(100vh - 45px);
width: 30%;
float: right;
}
#middle {
height: calc(100vh - 45px);
margin: 0 30% 0 300px;
}
The best is to use layering while thinking how you'll stack everything on top of each other. I've updated your jsFiddle here.
https://jsfiddle.net/L38cea2s/8/
html, body {
height:100%;
margin: 0;
}
#top {
width:100%;
height:50px;
top: 0;
background-color:red;
position: absolute;
}
#left {
width:70%;
height:100%;
top: 0;
background-color:green;
position: absolute;
}
#right {
width:30%;
height:100%;
top: 0;
background-color:yellow;
position: absolute;
}
So I have 3 Divs. Left, center right.
Image
If browser size smaller than center min-width, it goes down. Video:
Video
I don't know what do I wrong, so many people tried to help me + I searched for it but I didn't find anything. Here's the code:
HTML:
<div id="parent">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
CSS:
#parent
{
margin-left: 5%;
margin-right: 5%;
position: fixed;
top: 50px;
bottom: 50px;
left: 0;
right: 0;
overflow: auto;
}
#left {
position: relative;
width: 370px;
height: 100%;
float: left;
background: #093F5C;
overflow: hidden;
}
#right {
position: relative;
width: 230px;
height: 100%;
float: right;
background: #093F5C;
overflow: auto;
}
#center {
height: 100%;
min-width: 550px;
overflow: auto;
}
maybe...
#left {
position: absolute;
left:0px;
top: 0px;
width: 370px;
height: 100%;
background: #093F5C;
overflow: hidden;
}
#right {
position: absolute;
right:0px;
top:0px;
width: 230px;
height: 100%;
background: #093F5C;
overflow: auto;
}
#center {
height: 100%;
position:absolute;
left: 370px; /*width of leftDiv */
right: 230px; /*width of rightDiv */
top:0px;
/*min-width: 100px;*/
overflow: auto;
background: red;
}
jsfiddle: http://jsfiddle.net/alemarch/35bxtc2z/7/ (i have change the dimension fixed of the left and right div). Is this what you search?
The #center should have a max-width:550px, not a min-width:550px. You'll also probably want to add a width to it as well.
#center {
height:100%;
max-width:550px;
width:100%;
overflow:auto;
}
There's also a lot of other odd things about your CSS in general, but thats beyond the scope of this question... Some things to think about - why does the #parent have a position:fixed ? Why is everything else position:relative ? And why do you have heights of 100% ?
I have a fixed header and footer with a height of 50px. However, when I scroll the page, the page content overlaps the fixed header and footer. How can I hide the page as it scrolls into the header and footer (the top 50px)?
This can only be done in HTML/CSS. If it takes JS or JQ to perform this, then I will forget about doing this.
CSS
header {
height: 50px;
position: fixed;
}
.page {
position: relative;
}
.sidebar {
float: left;
position: fixed;
width: 220px;
}
.main {
float: right;
width: 740px;
}
footer {
position: fixed;
height: 50px;
}
HTML
<header>
This content should stay on top.
</header>
<div class="page">
<div class="sidebar">This content should not move when using scroll bars.</div>
<div class="main"></div>
</div>
<footer>
This content should stay on bottom.
</footer>
Try adding a value to your footer for example
bottom: 0;
Check this fiddle: http://jsfiddle.net/d7T83/
EDIT
Or you can specify a height for your page element
.page {
position: relative;
display:block;
height: 50px;
}
Demo
css
body, html {
height: 100%;
margin:0;
padding:0;
}
header {
top:0;
height: 50px;
position: fixed;
left:0;
right:0;
background: #ccc;
z-index:2;
}
.page {
position: relative;
background: #eee;
z-index:1;
height: 100%;
}
.sidebar {
left:0;
position: fixed;
width: 220px;
top:50px;
bottom: 50px;
background: #ddd;
height: calc(100% - 100px);
}
.main {
float: right;
width: calc(100% - 220px);
height: 100%;
background: red;
margin:50px 0;
}
footer {
position: fixed;
height: 50px;
bottom:0;
left:0;
right:0;
background: #aaa;
z-index:2;
}
I think what you are looking for would be this -
header {
top: 0;
height: 50px;
position: fixed;
display:block; /* fill the width */
z-index:2; /* z-index greater than .main */
width:100%; /* fill the width */
background-color: white; /* To make it opaque */
}
.page {
position: relative;
}
.sidebar {
top: 50px;
float: left;
position: fixed;
width: 220px;
}
.main {
margin-top: 50px;
float: right;
left: 220px;
width: 740px;
z-index:1; /* z-index lesser than header and footer */
}
footer {
position: fixed;
height: 50px;
bottom: 0;
display:block; /* fill the width */
z-index:2; /* z-index greater than .main */
width:100%; /* fill the width */
background-color: white; /* To make it opaque */
}
See example here - http://jsfiddle.net/7V57P/5/
For the header, just give a margin top to the page content. For the footer and header Give them a z-index that is higher than the page div to ensure that it overlaps the content.
header {
height: 50px;
position:fixed;
top:0px;
left:0px;
z-index:4;
background-color:orange;
}
.page {
margin-top:40px;
}
.main {
float: right;
width: 740px;
}
footer {
position: fixed;
bottom: 0px;
height: 50px;
background-color:orange;
z-index:4;
}
DEMO FIDDLE