I am building a website with different sections with absolute positioning, one of the sections has a height: auto, I was trying to align them by setting up a top: x vh; but it didn't work since there is a height:auto value.
These are the sections:
#navbar{
position:fixed;
width:100%;
height:10vh;
top:0;
left:0;
}
#greeting{
position: absolute;
width:100%;
height:90vh;
top:10vh;
left:0;
}
#projects{
width:100%;
min-height:90vh;
height:auto;
position:absolute;
top:100vh;
left:0;
right:0;
}
I want to add a new section after projects but I couldn't set the top value.
https://codepen.io/Kairkan/pen/LYyoVRX?editors=1100
this is my full code on codepen
HTML
<section id="contact">
<h1 id="contact-h1">Let's work together</h1>
<h3 id="contact-h3">How do you take your coffee?</h3>
</section>
/////
CSS
#contact{
height:100vh;
width:100%;
position: absolute;
left:0;
right:0;
background-color: #393A42;
}
This is the subsequent section. But it stacks on the top of the page because I couldn't set the top: value
You have to reset the margin property in the body section as follows:
body {
margin: 0;
}
then you can remove position: absolute, top, and left.Then just position your sections one by one as follows:
#greeting {
margin-top: 10vh;
height:90vh;
// ... other styles
}
#projects{
min-height:90vh;
// ... other styles
}
#contact {
min-height: 90vh;
background: lightblue;
// ... other styles
}
ps. 1 You don't have to use width: 100% on div and other block elements because that makes no sense. see
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
ps. 2 Avoid styling with IDs. Use classes instead. see
Got the sticky footer working on my site here is the CSS code
html, body {height:100%; }
#wrap {min-height: 100%;}
#main {overflow:auto; padding-bottom: 180px; } /* must be same height as the footer */
#footer {position: relative;
margin-top: -180px; /* negative value of footer height */
min-height: 180px;
clear:both;}
But there is a white gap between body (where I have a bgcolour) and footer...tried everything, anyone had any similar issues?
You can user this css code to stick your footer at bottom
footer {
position: fixed;
bottom:0;
min-height: 180px;
}
So it will always stick at bottom.
I am using position:relative and top:-120px to move the header background image underneath the two header <div/>s, which works nicely. I then had to set the wrapper <div/> and footer <div/> to also be relative and move them both up 120 pixels to line up correctly. The problem is that the bottom of the page now has 120 pixels of extra space underneath the footer. Is there an easy way to remove that space? Or perhaps is there a different way of using CSS and the position property to achieve this result? Here's my site:
http://ledvideowall.net
Here's the fix:
.wrapper {
top: 0;
}
.site-header {
margin-bottom: -120px;
}
footer[role="contentinfo"]{
top:0;
}
I was going to say that #headerbg doesn't need to exist, but I see that you are using the image to maintain the height/width ratio of the header as the page sizes down.
When I need to do something like this, I don't position the "background-image" in this case at all, but make the wrapper position:relative and the #headertop & #menubar position:absolute. This takes the top and menu out of the flow and makes the background image the work.
.site-header {
position:relative;
...
}
#headertop {
position:absolute;
top:0;
left:0;
width:100%;
z-index:1;
...
}
#menubar {
position:absolute;
top:80px;
left:0;
width:100%;
z-index:1;
...
}
#headerbg {
display:block;
height:auto;
width:100%;
/*
position: relative;
top: -120px;
z-index: 0;
*/
}
#headerbg img {
display:block;
width:100%;
height:auto;
}
You could apply margin-bottom to revert the effect the relative position causes:
footer[role="contentinfo"]{
margin-bottom: -120px;
}
If you've intentionally moved the footer up 120px, you can do this to remove the white space below it.
footer[role="contentinfo"] {
margin-bottom: -120px;
}
I have a footer that has position absolute:
#footer {
position:absolute;
bottom:0;
height: 43px;
padding:0;
background-color: #333333;
width:100%;
color:#737373;
text-align:center;
}
I've noticed that if I do vertical scrolling the footer stays exactly in the same place (it doesn't scroll along).
Any suggestions to fix this?
In this fiddle, if you squish the window down so the footer should overlay the text, you'll see it stays fixed to the bottom of the page. It uses position: fixed;
#footer {
position:fixed;
bottom:0;
left:0;/*add this*/
height: 43px;
/*padding:0;*//*no need this*/
background-color: #333333;
width:100%;
color:#737373;
text-align:center;
}
for my web application, i would like the main div to be full screen (both width and height = 100%), and regardless of content, i want it to stay at that size. that means, if there are not much content, it shouldn't shrink, and if there are too much content, it shouldn't push this main div.
how can i do this?
(i'm ok with hacks applied to this div, as long as it will keep contents hack-free)
Or even just:
<div id="full-size">
Your contents go here
</div>
html,body{ margin:0; padding:0; height:100%; width:100%; }
#full-size{
height:100%;
width:100%;
overflow:hidden; /* or overflow:auto; if you want scrollbars */
}
(html, body can be set to like.. 95%-99% or some such to account for slight inconsistencies in margins, etc.)
#fullDiv {
height: 100%;
width: 100%;
left: 0;
top: 0;
overflow: hidden;
position: fixed;
}
Notice how most of these can only be used WITHOUT a DOCTYPE. I'm looking for the same answer, but I have a DOCTYPE. There is one way to do it with a DOCTYPE however, although it doesn't apply to the style of my site, but it will work on the type of page you want to create:
div#full-size{
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
overflow:hidden;
Now, this was mentioned earlier but I just wanted to clarify that this is normally used with a DOCTYPE, height:100%; only works without a DOCTYPE
<html>
<div style="width:100%; height:100%; position:fixed; left:0;top:0;overflow:hidden;">
</div>
</html>
I use this approach for drawing a modal overlay.
.fullDiv { width:100%; height:100%; position:fixed }
I believe the distinction here is the use of position:fixed which may or may not be applicable to your use case.
I also add z-index:1000; background:rgba(50,50,50,.7);
Then, the modal content can live inside that div, and any content that was already on the page remains visible in the background but covered by the overlay fully while scrolling.
#fullDiv {
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 0;
bottom: 0;
right: 0;
overflow: hidden; /* or auto or scroll */
}
Use the HTML
<div id="full-size">
<div id="wrapper">
Your content goes here.
</div>
</div>
and use the CSS:
html, body {margin:0;padding:0;height:100%;}
#full-size {
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
overflow:hidden;
}
#wrapper {
/*You can add padding and margins here.*/
padding:0;
margin:0;
}
Make sure that the HTML is in the root element.
Hope this helps!
Here is my Solution, I think will better to use vh (viewport height) and vw for (viewport width), units regarding to the height and width of the current viewport
function myFunction() {
var element = document.getElementById("main");
element.classList.add("container");
}
.container{
height: 100vh;
width: 100vw;
overflow: hidden;
background-color: #333;
margin: 0;
padding: 0;
}
<div id="main"></div>
<button onclick="myFunction()">Try it</button>