I have an element with absolute position that is being displayed over the vertical scroll, preventing the user from scrolling the page using the scrollbar.
This fiddle explains the problem and what I'm currently doing.
This is the css I'm using to position the div.
.side-content {
background: grey;
position: absolute;
right: 0;
top: 60px;
height: calc(100% - 132px);
width: 100px;
}
I was expecting the div to be positioned considering the scrollbar (without manually adding a margin) and not hovering it.
Thanks in advance!
do z-index: -50;
.side-content {
z-index: -50;
background: grey;
position: absolute;
right: 0;
top: 60px;
height: calc(100% - 132px);
width: 100px;
}
body {
margin: 0;
text-align: center;
}
.wrapper
{
position:absolute;
width: 100%;
height:100%;
display: flex;
}
.inside_div_one
{
width:10%;
height:100%;
background-color: green;
}
.inside_div
{
width: 25%;
}
.inside_div_two
{
width:80%;
height:100%;
}
.inside_div_three
{
width:10%;
height:100%;
background-color: grey;
}
<html>
<head>
</head>
<body>
<div class="wrapper">
<div class="inside_div_one">
<p>sidebar</p>
</div>
<div class="inside_div_two">
<p>FIRST</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>LAST</p>
</div>
<div class="inside_div_three">
<p>jvsdfv</p>
</div>
</div>
</body>
</html>
Related
I'll try to explain this the easiest i can. I would like to have a "grand parent" element which takes 100vh height, and 100% width of viewport, something like a section, and inside there's gonna be a parent element which contains a child element that will have an absolute positioning.
<body>
<div class="container">
<div class="parentElement">
<div class="ChildrenElement">
</div>
</div>
</div>
</body>
Styling:
<style>
.container {
background-color:black;
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
}
.parentElement {
position:relative;
background-color:blue;
width: 800px;
height: 200px;
}
.ChildrenElement {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255,192,203, 0.5);
transform: translate(10%);
}
</style>
The output:
But i would this to be something like:
The red box represents the children element, and if it moves away from the parent element, it should be behind the black background
The code:
https://jsbin.com/pemasacazi/edit?html
I believe you are looking for oveflow:hidden (https://developer.mozilla.org/en-US/docs/Web/CSS/overflow).
.container {
background-color:black;
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
}
.parentElement {
position:relative;
background-color:blue;
width: 800px;
height: 200px;
max-width: 90%;
margin: auto;
overflow:hidden;
}
.ChildrenElement {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255,192,203, 0.5);
transform: translate(10%);
}
<!DOCTYPE html>
<body>
<div class="container">
<div class="parentElement">
<div class="ChildrenElement">
</div>
</div>
</div>
</body>
The problem here is that HTML always puts the parent elements behind the children elements so that they are visible. We can change this simply by swapping the classes of the parent and children elements:
.container {
background-color: black;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.parentElement {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 192, 203, 0.5);
transform: translate(10%);
}
.ChildrenElement {
position: relative;
background-color: blue;
width: 800px;
height: 200px;
}
<body>
<div class="container">
<div class="ChildrenElement">
<div class="parentElement">
</div>
</div>
</div>
</body>
Now even though the positioning of the elements has changed, I don't see any difference. Please comment if this will work.
How to make the green div wrap around the blue and yellow divs (his children)
in this particular problem:
https://jsfiddle.net/y74ueuLa/
HTML
<div id="main">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="footer"></div>
CSS
#main {
width: 100%;
background-color: green;
z-index: -2;
position: relative;
margin-bottom: 10px;
}
#one {
width: 100%;
height: 150px;
background-color: blue;
position: absolute;
z-index:-1;
}
#two {
position: relative;
top: 100px;
z-index:3;
width: 300px;
height: 500px;
background-color: yellow;
margin: 0px auto;
}
The green div is wrapped around the blue div. It just doesn't appear that way because the blue div is on top.
With div #two you're positioning it relatively with top 100px. When you position something relative, you're moving the visual component of the div relative to where it would naturally fall in the browser. It's equivalent to saying "visually move down 150px from where you are". You could just make the green div taller, but I don't think that's what you're going for.
I think what you're trying to do (and please correct me if I'm wrong), is this:
https://jsfiddle.net/dk6L1zLL/
#main {
width: 100%;
background-color: green;
z-index: -2;
position: relative;
margin-bottom: 10px;
padding-top:10px;
padding-bottom:10px;
}
#one {
//width: 100%;
height: 150px;
background-color: blue;
//position: absolute;
z-index:-1;
margin:0 10px 0;
}
#two {
//position: relative;
//top: 100px;
z-index:3;
width: 300px;
height: 500px;
background-color: yellow;
margin: 0px auto;
/*margin-bottom: 500px;*/
}
#footer {
height: 100px;
background-color: red;
width: 100%;
position: relative;
z-index: -3;
}
<body>
<div id="main">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="footer"></div>
</body>
I got rid of a lot of the positioning rules and added some margin and padding.
I have seen a few questions about somewhat the same issue, but none of the specified answers actually work for this one.
Consider the following snippet :
$(function () {
$(window).on('scroll', function () {
/**
THIS SHOULD NOT BE CALLED!!!
So, change some colors to warn about it, if it happens.
*/
$('#content').css('background-color', 'red');
});
});
body {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
#container {
position: absolute;
height: 100%;
width: 100%;
z-index: 9999999;
overflow: auto;
}
#nav {
background-color:rgb(50,50,50);
color: white;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 30px;
padding-top: 10px;
z-index: 100;
}
#content-wrapper {
background-color:rgb(200,200,200);
min-height: 100%;
height: auto !important;
width: 100%;
z-index:2;
}
#content {
padding-top: 40px;
padding-bottom: 40px;
}
#footer {
background-color: rgb(220, 220, 240);
position: fixed;
left: 0;
bottom: 0;
height: 30px;
width: 100%;
padding-top: 10px;
z-index: 9999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="nav">
Navbar
</div>
<div id="content-wrapper">
<div id="content">
<div>
Begin
</div>
<div style="height: 600px;">
...
</div>
<div>
End
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
The scrollbar goes underneath nav and footer. Since this is very important that only the container element scrolls (the BODY element must not scroll), how can I fix this? Is it possible?
The HTML structure should essentially be as suggested in this question (fixed nav, full height content, etc.). I have tried several tricks; modifying z-indexes, wrapping things around, etc., I'm at a lost here.
The targeted browser is Google Chrome, as this is the adopted browser in use for this application. The ideal solution would make the fixed element adjust their width to compensate for the overflow: auto; on the container element.
Demo in this fiddle
An alternative approach here would be to only scroll the #content-wrapper from your example. Here's a basic example of how this might be done:
HTML
<div id="container">
<div id="nav">
Navbar
</div>
<div id="content-wrapper">
<div id="content">
<div>
Begin
</div>
<div style="height: 600px;">
...
</div>
<div>
End
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
CSS
body {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
#container {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
}
#nav {
background-color:rgb(50,50,50);
color: white;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 30px;
padding-top: 10px;
}
#content-wrapper {
position:absolute;
top:40px;
bottom:40px;
left:0;
right:0;
background-color:rgb(200,200,200);
width: 100%;
overflow:scroll;
}
#footer {
background-color: rgb(220, 220, 240);
position: fixed;
left: 0;
bottom: 0;
height: 30px;
width: 100%;
padding-top: 10px;
}
See this fiddle
Remove overflow:auto from #container.
So the CSS for #container would be like
#container {
position: absolute;
height: 100%;
width: 100%;
z-index: 9999999;
}
UPDATE
Add overflow:auto to #content.
http://jsfiddle.net/a8xqhh3L/
Remove overflow: auto from #container.
I have little problem with positioning divs with CSS - I would like to make 3 divs that cover whole window:
div1 (top) with width 100% and constant height
div2 (left-bottom) with constant width and full height
div3 (right-bottom) with the remaining width, also full height
Is there any way to do this without JavaScript?
Thanks.
Is this what you are looking for?
FIDDLE: http://jsfiddle.net/5V48p/1/
EDIT - Just saw your comment about fluid height for bottom divs - see this: http://jsfiddle.net/5V48p/2/
THE HTML:
<body>
<div id="top">Word, yo.</div>
<div id="bottom-left">Look at me!</div>
<div id="bottom-right">Hobajoba!</div>
</body>
THE CSS:
body, html {
width: 100%;
height: 100%;
margin: 0;
}
#top {
height: 100px;
background-color: yellow;
}
#bottom-left {
position:absolute;
bottom:0px;
float:left;
width: 180px;
background-color: lightblue;
height:calc(100% - 100px);
margin-top:100px;
}
#bottom-right {
position:absolute;
bottom:0px;
width: calc(100% - 180px);
margin-left:180px;
background-color: pink;
height:calc(100% - 100px);
margin-top:100px;
}
For example:
.div1 {
position:absolute;
left:0;
right: 0;
top:0;
height: 100px;
}
.div2 {
position:absolute;
left:0;
bottom: 0;
height: 20px;
width: 100px;
}
.div3 {
position:absolute;
right:0;
bottom: 0;
height: 20px;
left: 100px;
}
EXAMPLE
Here, checkout my jsfiddle: http://jsfiddle.net/Shwunky/nwy6h/
Basically, it's a play on z-index
The only problem I see with this one is that if you remove the bottom right and top divisions, the bottom left division would fill the whole viewport.
Yes you can do it with javascript. The key is to understand how to take advantage of position: absolute.
Here's a JS Fiddle showing you how it can be done:
http://jsfiddle.net/cbbZq/
HTML:
<div id="container">
<div id="top">Top</div>
<div id="bottom-left">Bottom Left</div>
<div id="bottom-right">Bottom Right</div>
</div>
CSS:
html, body {
width: 100%;
height: 100%;
}
#container {
width: 100%;
height: 100%;
position: relative;
}
#top {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 200px;
background-color: lightblue;
}
#bottom-left {
position: absolute;
top: 200px;
left: 0;
bottom: 0;
width: 100px;
background-color: yellow;
}
#bottom-right {
position: absolute;
top: 200px;
left: 100px;
right: 0;
bottom: 0;
background-color: green;
}
HTML:
<body>
<div id="top">TOP AREA</div>
<div id="bottom-right">
<div id="bottom-left">
FIXED WIDTH
</div>
NOT FIXED
</div>
</body>
CSS:
html,body{margin:0;padding:0;width:100%;}
#top
{
width:100%;
}
#bottom-left
{
width:180px;
float:left;
}
#bottom-right
{
width:100%;
}
You can achieve this using table,tr,td as follows:
<body>
<table class="table" cellspacing="0">
<tr id="top">
<td colspan="2"></td>
</tr>
<tr id="division">
<td id="left"></td>
<td id="right"></td>
</tr>
</table>
</body>
and css:
html,body {
height:100%;
}
#top {
width: 100%;
height: 100px;
background-color:red;
}
.table {
height: 100%;
}
#division {
width: 100%;
min-height: 100%;
}
#left {
background-color:green;
min-width: 100px;
}
#right {
background-color:blue;
width: 100%;
}
here's the demo: http://jsfiddle.net/aneelkkhatri/2c7ag/1/
+-------------------+
| 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.