I'm trying to replicate a design pattern I often see on webpages. I'd like the content of my page to start after the full height of the window.
I have a header with a bunch of links which are centered both vertically and horizontally in my screen and I would like the first paragraph not to be displayed on the page (you should scroll to see it, you should only see the header when you land on the page).
I've tried to apply a margin-top:100% to my content but it is way too far in the bottom of the page since the height of the header is added to the margin.
Schematically this would be something like this
<body>
<!-- You can see this when you load the page -->
<div id="header">
blablabla
Index
Contact
...
</div>
<!-- You should scroll to see this -->
<div id="content">
<p>...</p>
</div>
</body>
In javascript this would like this :
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var hheight = document.getElementById('header').offsetHeight;
document.getElementById("content").style.marginTop = (height - hheight)+ "px";
Any hints on how to do that? I often see these kind of patterns on mobile designs but I never figured out how to do it. I can do it using javascript, but I think there might be a way of doing it with pure css ...
Use vh units. 100vh is the height of the viewport. Here's a reference - https://developer.mozilla.org/en-US/docs/Web/CSS/length
body {
margin: 0;
}
#header {
height: 100vh;
background: #eee;
}
<body>
<!-- You can see this when you load the page -->
<div id="header">
blablabla
Index
Contact
...
</div>
<!-- You should scroll to see this -->
<div id="content">
<p>...</p>
</div>
</body>
Related
My question is almost exactly like this one : CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page The main difference being that I could not get any of these answers to work in my case
What I am trying to achieve :
if the page does not posses enough content for a scroll, the footer is displayed at the bottom of the page
if the page posses enough content to scroll, the footer is displayed at the bottom of the content ( does not stick to the bottom of the screen )
The main issue here is that I have a lot of extra div in the hierarchy and I struggle to understand how to apply the given solution on them.
The best I could achieve was either to get the div at the bottom of the content regardless of it's length or to overlap the header.
My code looks like this :
( index.html ):
<html>
<head>
<!-- ... -->
</head>
<body>
<app-root></app-root>
</body>
</html>
( app.component.html )
<div id="body-container">
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>
( footer.html )
<div id="footer">
<p>footer works!</p>
</div>
Move your footer component out of body-container and apply the following style:
index.html
<body>
<div id="body-container">
<app-header></app-header>
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
</body>
Your css file
html, body {
height: 100%;
margin: 0;
}
#body-container {
min-height: 100%;
/* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: -50px;
}
#footer {
height: 50px;
}
Tips: It's a good practice use the footer tag to footer of the page, header tag to header the page. Like this:
<header>The header page </header>
<main>Your content</main>
<footer>The footer page </footer>
I've been trying all sorts of solutions offered here and other places, and none of them seem to work. I'd like to have an image take up the full width of the browser window, no matter the size (height scaled proportionally). But I need to place this image within a smaller container <div>, as it's part of dynamic content (the body of a blog post). I'm using bootstrap, but I don't think this problem is unique to the framework. Code:
<div class="container">
<div id="content" class="col-md-8">
{dynamic content in here}
<!-- still part of blog post -->
<div class="large"><img src...></div>
{more content}
</div>
</div>
CSS:
div.content { width: 70%; }
div.large img { width: 100%; }
If I put <img src="..." class="large"> inside the container div, it will, of course, be the size of that <div>. If I manually set the width of the image to, say, 1900px, it extends far out to the right of the main content, and I have to experiment to find an appropriate negative margin-left to center the image (margin: 0 auto doesn't center it). And of course that only works on a pixel-specific size. As soon as the window size changes, that code breaks.
If I set position: absolute;, the image appears on top of any following content, which isn't the behavior I want. I also tried this javascript using jQuery:
<script>
$("div.large img").css("width", $(window).width);
</script>
As well as a version without jQuery that iterates over the results of document.getElementsByClassName().
None of these approaches seem to give the results I want. Opening and closing the container would be a Bad Idea(tm), as this would break the isolation between the static layout and dynamic content, and so break the whole site if the static part of the layout changes and the blog posts aren't all manually updated.
It works for me with position absolute
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
margin: 0;
}
div#small{
width: 200px;
background-color: green;
}
div#fullscreen{
position: absolute;
width: 100%;
background-color: red;
}
</style>
</head>
<body>
<div id="small">
i am a small div inside your browser window
<div id="fullscreen">
i got the same width as your browser window
</div>
</div>
<div id="small">
i am a small div inside your browser window
</div>
</body>
</html>
I think you'll need to do something like this...
<div class="container">
<div id="content">
<div class="col-md-8 etc..."></div>
{ content in here}
</div>
<!-- still part of blog post -->
<div class="large"><img src...></div>
<div class="col-md-8 etc..."></div>
{more content in here}
</div>
</div>
</div>
Set the .container to 100%, the content to 70% and the .large to 100% too
I want to fill the screen (width and height) on any size with a <header>:
<header></header>
<div id="content"></div>
<footer></footer>
The <header> should always fill the whole screen on any height of monitor also in iPad, such that the content of <div id="content"> will only be seen after scrolling, not before that.
Simply give your html, body & header a height of 100%:
html, body, header {
height: 100%
}
http://jsfiddle.net/tujsj/
You can use the new and so-useful-I-can't-imagine-what-took-W3C-so-long vh CSS unit:
<header style="height: 100vh"></header>
<div id="content">must scroll to see this</div>
<footer></footer>
Have you tried using javascript, specifically jquery to handle this?
If you include jquery in your head tag, then you can use something like this:
$(document).ready(function(){
$("#header").height($(window).height());
});
I'm in a little bit of a pickle. My page doesn't end with my footer, as it would normally do. Instead, there is a lot of "body background" going on after all my divs end, while I would really like the scroll to end with the bottom of the footer.
I am not entirely sure, but this effect may have to do with my page menu, which uses text and jpg with a lot of hover (on the active page it has a height of 350px, on Dreamweaver's layout however it is about triple that height, due to all the jpgs which are listed.
My question: Is there a way to make the page "end" with the last div, the footer? As the whole html is a little too much, here's my basic layout:
<body>
<div class="backgroundofwholepage">
<div class="menu">
<!--contains a few other divs for the menu-->
</div>
<div class="content">
<!--contains a three column div structure, based on float-->
<br class="clearfloat">
<!--contains clear:both-->
<div class="footer">
</div>
</div>
</div>
</body>
If any of you have an idea, I'd much appreciate your help!
ACME
You either want a sticky footer (putting your footer at the bottom of the page for sure) or you want to put a background on your html element so that the body background doesn't fill the window.
html { background:white }
body { background-image:url( ... ) }
For example, see: http://jsfiddle.net/vRBZM/
I'm helpless, tried my best understanding CSS but it's just not for me.
I would like to make a really simple MasterPage:
at the top a div of full width and height 40px (1)
at the bottom also a div of full width and height 40px (2)
in the middle:
on the left: a div of width 200 px (3)
on the right side of the left div: a div with contentPlaceHolder (4)
What I would like to get is: if i make some site that uses my master page and place a panel in the contentPlaceHolder that has width 800px, I would like my site to adjust to it - top, middle and bottom divs to have their width of 1000px (200 + 800). I also wouldn't like (and I have a huge problem with that) the (4) to move down if I resize (shrink) the browser window - I would like all the divs to be blocked.
This is my master page html:
<div>
<div class="header">
</div>
<div>
<div class="links">
</div>
<div class="content">
</div>
</div>
<div class="footer">
</div>
</div>
What kind of CSS do I have to write to make this finally work?
Not sure if you have checked into this or not, but we use the YUI-Grids CSS Framework for our layouts. It keeps us from having to spend a lot of time on CSS, which we are not great at being developers.
There is even a grid builder which will let you graphically layout a page, and then copy and paste the required HTML to make it happen :)
To prevent floated divs from being "squeezed" out of the alignment you want, you usually use either width or min-width.
For example, in this code the div containing the links and content will never be smaller than 1000 pixels. If the screen is smaller than 1000 pixels, a scrollbar is displayed.
<div style="min-width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
You could also use width instead of min-width:
<div style="width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
The difference between the two is simple: if you specify min-width, the div CAN grow to be larger if it needs to. If you specify width, the div will be exactly the size you specified.
Be aware that min-width is not supported by IE6.
Here's a quick stab at specific CSS/Markup for this problem.
Markup:
<!-- Header, etc. -->
<div class="contentView">
<div class="links">
</div>
<div class="content">
</div>
</div>
<!-- Footer, etc. -->
CSS:
.contentView {
/* Causes absolutely positioned children to be positioned relative to this object */
position: relative;
}
.links {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.content {
padding-left: 200px;
}
You might want your footer to be "sticky." Check here for information on that: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
How appropriate this is depends on precisely what the design calls for. This makes the links section more of a floating box on the left than a column for example.
This ends up looking like this (.content is green, .links is red):