I have the following layout for my onepage site, I've never made one before so it is very much a learning curve.
The only issue I can currently see with this is when I shrink the height of the page, the div size also shrinks, even when I add min-height: 800px;. What can I do to get around this issue? (If I didn't explain this properly, use my code and shrink the height of your page so you can only just see the background-colors, then scroll, you will notice that in fact, the height is not 800px),
div.top,
div.mid,
div.bottom {
height: 100vh;
min-height: 800px;
width: 100%;
position: absolute;
left: 0;
right: 0;
}
div.top {
background-color: red;
top: 0;
}
div.mid {
background-color: blue;
top: 100vh;
}
div.bottom {
background-color: yellow;
top: 200vh;
}
<div class="top">
<h1>Top</h1>
</div>
<div class="mid">
<h1>Mid</h1>
</div>
<div class="bottom">
<h1>Bottom</h1>
</div>
EDIT: To explain why I am using position: absolute
I use position: absolute so that I am able to use top left and right so that I don't have the margin around each div.
Without absolute
With absolute
body {
margin: 0;
}
.top, .mid, .bot {
height: 100vh;
min-height: 800px;
width: 100%;
}
.top {
background: red;
}
.mid {
background: blue;
}
.bot {
background: green;
}
<div class="top">
<span>top</span>
</div>
<div class="mid">
<span>mid</span>
</div>
<div class="bot">
<span>bot</span>
</div>
Your 'margin' is coming from the H1 tag, removed that and the gap disappears from between the divs. I've removed the absolute positioning and left / right / top values because they are redundant with the removal of the margin:
div.top,
div.mid,
div.bottom {
height: 100vh;
min-height: 800px;
width: 100%;
}
h1 {
margin-top: 0;
}
div.top {
background-color: red;
}
div.mid {
background-color: blue;
}
div.bottom {
background-color: yellow;
}
<div class="top">
<h1>Top</h1>
</div>
<div class="mid">
<h1>Mid</h1>
</div>
<div class="bottom">
<h1>Bottom</h1>
</div>
Related
Assume you have a website with a position: fixed header. If we click internal (same-page) links, that header will overlap the content we are taken to via the link.
I created a solution to this problem, using a pseudo-element with negative margin, which takes advantage of parent-child margin collapsing to prevent header overlap from occurring.
In short summary, the pseudo-element's top margin collapses with main element's top margin, causing the pseudo-element to stay within main, but push main's content down while at the same time pull content above it downwards.
It works well, except main's background will paint on top of background of element above it.
That can probably be prevented with position: relative and z-index on all elements.
My question: Is there a better way? Also, is this the typical way this problem is solved?
A minimal working example can be found below.
Note: The pseudo-element has background-color set on it, just to illustrate its presence. That background should be removed when testing it.
body {
height: 300vh;
text-align: center;
width: 100%;
}
.header {
height: 40px;
width: 100%;
background-color: yellow;
position: fixed;
top: 0;
}
.foo {
height: 50px;
background-color: grey;
}
.foo:nth-child(2) {
margin-top: 40px;
background-color: red;
}
.main {
height: 100px;
background: blue;
}
.main div {
height: 100px;
}
.main::before {
content: "pseudo-element (when removing its background-color, you see how .main unfortunately paints on top of foo)";
display: block;
background: green;
height: 40px;
margin-top: -40px;
}
.main2 {
height: 100px;
background-color: blue;
}
<div class="header">
Fixed Header: Click Me!</div>
<div class="foo">foo: section</div>
<div class="foo">foo: section</div>
<div class="main" id="scroll">
<div class="main2">main: section</div>
</div>
<!-- <div class="main" id="scroll">main</div> -->
Is there a better way?
it depends on what you mean by better. In all the cases, the solution shouldn't break any other functionality or the layout then we can consider it as a good solution.
Also, is this the typical way this problem is solved?
The problem as you already noticed, involve painting order so the typical way to solve such issue is to add/change some properties in order to adjust the painting order like we want. You may also notice that not only z-index changes order but other properties like transform, filter, opacity, float, etc.
For this particular case, you don't need to adjust z-index and make all the element positioned. You simply need to increase the z-index of the fixed header and make the scrolling element positioned:
body {
height: 300vh;
text-align: center;
width: 100%;
}
.header {
height: 40px;
width: 100%;
background-color: yellow;
position: fixed;
z-index:1;
top: 0;
}
.foo {
height: 50px;
background-color: grey;
}
.foo:nth-child(2) {
margin-top: 40px;
background-color: red;
}
.main {
height: 100px;
position:relative;
background: blue;
}
.main div {
height: 100px;
}
.main::before {
content: "pseudo-element (when removing its background-color, you see how .main unfortunately paints on top of foo)";
display: block;
background: green;
height: 40px;
margin-top: -40px;
}
.main2 {
height: 100px;
background-color: blue;
}
<div class="header">
Fixed Header: Click Me!</div>
<div class="foo">foo: section</div>
<div class="foo">foo: section</div>
<div class="main" id="scroll">
<div class="main2">main: section</div>
</div>
<!-- <div class="main" id="scroll">main</div> -->
You can add an invisible anchor to be the target of the top link, and then add top padding equal to your header to that target:
body {
height: 300vh;
text-align: center;
width: 100%;
padding: 0px;
margin: 0px;
}
.header {
height: 40px;
width: 100%;
background-color: yellow;
position: fixed;
top: 0;
}
#anchor {
padding-top: 40px;
visibility: hidden;
}
.foo {
height: 50px;
background-color: grey;
}
.foo:nth-child(2) {
margin-top: 40px;
background-color: red;
}
.main {
height: 100px;
background: blue;
}
.main div {
height: 100px;
}
.main2 {
height: 100px;
background-color: blue;
}
<div class="header">
Fixed Header: Click Me!</div>
<div class="foo">foo: section</div>
<div class="foo">foo2ndchild: section</div>
<div class="main" id="scroll">
<a id="anchor">not shown</a>
<div class="main2">scrolling to this section</div>
</div>
Is it possible, to fix a div bar at the top of the page even when scrolling, and
still be able to fully see the next div?
The bar div is given a height of 15vh and the other divs are set to 85, so when You see the first view of the page divs #bar and #one are displayed.
I would like that after scrolling down that divs #bar and #two are seen. I tried everything: giving margin, padding, position relative, absolute, adding to #one top: 15vh;. Tried also putting div on #one and #two divs.. made all combinations..
This is the code I have so far that is the closest to what I mean and can't find how to go futher
* {
margin: 0;
padding: 0;
}
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#bar {
background-color: gray;
height: 15vh;
position: fixed;
width: 1000px;
}
#one {
background-color: blue;
height: 85vh;
}
#two {
background-color: red;
height: 85vh;
}
<div id="container">
<div id="bar"></div>
<div id="one"></div>
<div id="two"></div>
</div>
Add padding-top:15vh; to #one to create/add the part which is hidden behind the fixed navbar
* {
margin: 0;
padding: 0;
}
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#bar {
background-color: gray;
height: 15vh;
position: fixed;
width: 1000px;
}
#one {
background-color: blue;
padding-top:15vh;
height: 85vh;
}
#two {
background-color: red;
height: 85vh;
}
<div id="container">
<div id="bar"></div>
<div id="one"></div>
<div id="two"></div>
</div>
Here's a simplified version of my homepage:
<div class="main">
<div class="content"> all the content of my website </div>
<div class="nav"> fixed on the screen and always visible </div>
</div>
And here's the corresponding css:
.main {
max-width: 500px;
height: 2000px;
margin: auto;
background-color: grey;
}
.nav {
width: 100px;
height: 100px;
background-color: blue;
position:fixed;
right: 0; /* that's the issue */
}
I'd like the fixed element to stay within it's parent (touching the right edge of its parent). But right now it's touching the right border of the screen.
Any idea how to fix this? Thanks!
You can add an extra item to simulate the properties of the main container, try this:
.main {
max-width: 500px;
height: 2000px;
margin: auto;
background-color: grey;
}
.nav {
position:fixed;
max-width:500px;
width:100%;
}
.nav > div{
width: 100px;
height: 100px;
background-color: blue;
float:right;
}
<div class="main">
<div class="content">all the content of my website</div>
<div class="nav"><div>fixed on the screen and always visible</div></div>
</div>
position: fixed is described as, "The element is positioned relative to the browser window". You can use Javascript to accomplish this effect, here is how you do it with jQuery, for example:
$(window).scroll(function() {
var y = $(window).scrollTop();
$(".nav").css('top', y);
});
.main {
max-width: 500px;
height: 4000px;
margin: auto;
background-color: grey;
position: relative;
}
.nav {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
right: 0; /* that's the issue */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="content"> parent </div>
<div class="nav"> fixed to parent width </div>
</div>
I'm trying to create a layout for a page like this with a full height left close bar. I keep running into the left close bar either pushing everything down or is limited to only the top left corner:
I think you want something like that.
body {margin:0;}
.side {
position: fixed;
background: blue;
top: 0;
left: 0;
bottom: 0;
width: 100px;
}
.content {
padding-left: 100px;
width: 100%;
height: 100vh;
box-sizing: border-box;
}
.top {
height: 100px;
width: 100%;
background: orange;
float: left;
}
.left, .right {
width: 50%;
height: 200px;
float: left;
}
.left {
background: green;
}
.right {
background: magenta;
}
<div class="side"></div>
<div class="content">
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
</div>
If you want to make the sidebar full height you can use
.sidebar{
height:100vh;
}
and then you can give position:fixed;
So I'm working on some html/css stuff
I can't seem to get these two floating div's and the footer to be correctly sized inside the parent div.
the content div is positioned absolutely to get header and footer to show respectively.
HTML:
<div id="Content">
<div id="Header">header</div>
<div id="Container">
<div id="leftTable">
<div>left content</div>
</div>
<div id="rightTable">
<div>right content</div>
</div>
</div>
<div id="Footer">
<div>footer</div>
</div>
</div>
CSS:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#Content {
padding: 0 15px;
height: 100%;
background-color: honeydew;
position: relative;
height: 100%;
}
#Header {
height: 60px;
background-color: aliceblue;
}
#Footer {
position: absolute;
bottom: 0;
background-color: purple;
height: 70px;
}
#Container {
background-color: green;
position: absolute;
top: 60px;
bottom: 70px;
margin-right: 15px;
}
#Container:after {
clear:both;
}
#leftTable {
float: left;
width: 50%;
height: 100%;
background-color: grey;
}
#rightTable {
float: left;
width: 50%;
background-color: blue;
}
http://jsfiddle.net/4CabB/12/
I was hoping to no position the Container div or footer div on the left and right sides and just have it take up the remaining space.
I'm a bit unclear as to what needs to be achieved, but perhaps this solves your issue: JSFiddle.
Essentially, I just needed to add
width: 100%;
to your container to allow its children to take up the space. Parent containers, when absolutely positioned, must have their widths specified.