I have a header and a long scrollable content. I'd like the header to not be scrollable. I tried setting overflow: hidden to the header but without success.
How can I get the header out of the scroll area?
Snippet:
<body>
<div style="overflow: hidden">Header</div>
<div style="overflow: scroll">Content - very long Content...
See a Plunker with this code.
I also tried setting styles in the body - without success.
I know there's a way to make the header fixed using position fixed, but I don't want to use it because it requires to know the height of the header in advance (for the margin). This requires size duplication and if the header is more complicated, it requires computation.
Found the flex magic.
Here's an example of how to do a fixed header and a scrollable content. Code:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset=utf-8 />
<title>Holy Grail</title>
<!-- Reset browser defaults -->
<link rel="stylesheet" href="reset.css">
</head>
<body style="display: flex; height: 100%; flex-direction: column">
<div>HEADER<br/>------------
</div>
<div style="flex: 1; overflow: auto">
CONTENT - START<br/>
<script>
for (var i=0 ; i<1000 ; ++i) {
document.write(" Very long content!");
}
</script>
<br/>CONTENT - END
</div>
</body>
</html>
For a full Holy Grail implementation (header, footer, nav, side, and content), using flex display, go to here.
Remove your inline styles first.
Then add this css.
html , body {
margin: 0px;
height: 100%;
}
.content {
height: 100%;
overflow: scroll;
}
https://jsfiddle.net/sthsuuec/11/
Related
I am trying to make a header that covers the entire viewport, no matter what size screen you use. That header will be horizontally divided into 3 sections that each fill 1/3 of the header.
I have tried setting the height of the header to 100vh. Didn't work.
I have tried setting the height of the header to 100%. Didn't work.
I have tried setting the background-size of the header to cover. Also didn't work.
Could someone explain what the best approach would be to this.
Thanks
Flex for the win: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
<html style="height: 100%">
<body style="height: 100%">
<div style="height: 100%; display: flex; flex-direction: column;">
<div style="flex: 1; background-color: red;">1/3</div>
<div style="flex: 1; background-color: blue;">2/3</div>
<div style="flex: 1; background-color: black;">3/3</div>
</div>
</body>
</html>
If you don't care too much about old browsers, I'd suggest using flexboxes.
header {
display: flex;
}
div {
flex: 0 0 33.33%;
border: 1px solid;
}
<header>
<div>
#1
</div>
<div>
#2
</div>
<div>
#3
</div>
</header>
I've made the example over simplified, it will need correct browser prefixes for best compatibility.
I realize this is an old thread, however, I didn't see a concrete solution. To prevent the scrolling issue, I always add the following CSS code at the top of the page:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
I also normally create a "reset.css" or "reset.scss" file that includes the above code. For additional CSS reset coding, copy and paste code from this website:
https://meyerweb.com/eric/tools/css/reset/.
You can also Google "CSS reset" and you'll find this site typically as the 2nd or 3rd search result.
To reference your new "reset.css" or "reset.scss" file in your index.html, add the following code within your "head" tags. I have mine in a "styles" folder.
<link rel="stylesheet" href="../styles/reset.css">
or
<link rel="stylesheet" href="../styles/reset.scss">
Setting height: 100% for <div> .ui in the HTML below does not work even though all the parent elements have height set to 100%.
Could this be because I'm using <core-header-panel>? I checked its code but I don't see anything that would override the height.
Could this be due to using the layout horizontal attributes?
The layout attributes (built on top of CSS Flexbox) and core-header-panel are part of Polymer.
This is the HTML (simplified):
<!doctype html>
<html>
<body unresolved>
<core-header-panel>
<div layout horizontal class="container">
<div class="ui"> </div> <!-- this does not take up 100% of
the height -->
<div flex class="items"> </div> <!-- this has content inside it which fills
the height, but the <div> itself doesn't -->
And this is my CSS (simplified):
html, body {
height: 100%;
}
core-header-panel {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.container {
width: 100%;
height: 100%;
}
.ui {
height: 100%;
position: relative;
margin: 30px;
}
.items {
display: inline-block;
height: 100%;
margin: 30px;
}
Any help would be appreciated.
EDIT 1: Using DevTools I noticed that <core-header-panel> does take up 100% of the height, but <div> .container does not. height: 100%; is not crossed out for .container in the "Styles" tab in DevTools.
EDIT 2: INFO ON POLYMER Here is a link to a simple explanation of Polymer layout attributes and here is a link to some information on core header panel. There are Github links on the top right of both pages.
The solution was actually really simple.
I had to add fullbleed vertical layout to <core-header-panel>. fullbleed forces it to take up the entire height of the parent. I didn't see a reason for this since I specified height: 100%, but it appears that it does not work without it.
I also added fit to <div> .container to make it fit the parent.
<!doctype html>
<html>
<body unresolved>
<core-header-panel fullbleed vertical layout> <!-- added "fullbleed vertical layout" here -->
<div fit layout horizontal class="container"> <!-- added "fit" here -->
<div class="ui"> </div>
<div flex class="items"> </div>
I creating an new layout for a personal website.
I'm using Twitter Bootstrap 3, and my initial layout was made using as exemple
the "Bootstrap with sticky footer" sample (http://getbootstrap.com/examples/sticky-footer-navbar/)
This is my html:
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Begin page navigation -->
<nav id="nav-container" class="navbar navbar-default container" role="navigation">
<div class="container">
<!-- Here I put a very normal Bootstrap 3 navbar -->
</div>
</nav>
<!-- Begin page content -->
<div id="main-container" class="container">
<!-- All my content goes here! -->
</div>
</div>
<!-- Begin page footer -->
<footer id="footer" class="container">
<div class="container">
</div>
</footer>
</body>
The Sticky Footer CSS:
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -100px;
/* Pad bottom by footer height */
padding: 0 0 100px;
}
/* Set the fixed height of the footer here */
#footer {
height: 100px;
}
And the custom style for my layout:
body {
/* Body's background will be grey */
background-color: #C0C0C0;
}
#main-container {
/* A box where I'll put the content will be white */
background-color: #FFFFFF;
}
#wrap {
height: 100%;
min-height: 100%;
}
#main-container {
min-height: 100%;
height: 100%;
}
This code generate this layout:
But, as you can see, the div #main-container don't grow 'till the end of the layout.
The div keep with the height of his content.
What I want is that this div always fills the entire page, like this:
Many solutions on internet said me to fix min-height to some tested value, but this way
I'll not be able to keep my website responsive (it's very important to me keep my layout
always responsive, that's the main reason I use Bootstrap 3).
Other solution goes to calculate the div height with javascript. Personally I don't like
this solution. I whish I could solve this only by using CSS.
Someone knows how to solve this problem?
As long as you are working on percentage, your site will be responsive. So using
min-height:100% does solve your problem which is just CSS. And if you don't want Javascript involved here, that is the way to go.
See the JS Fiddle DEMO. Your container is filling the entire page.
#main-container {
min-height: 100%;
background: #fff;
}
If you want to have sticky footer AND fullheight #main-container, you have to modify your structure. First, let me explain why you can't solve this with the sticky-footer method you're using right now:
Setting #main-container's height:100% or min-height:100% won't work because you can't use percentage height with a parent whose height is not strictly defined. Note that in the currently accepted answer this is considered a bug but it is not, it's just the way it is supposed to work. In your example #wrap's height is set to auto, so #main-container height just ignores the 100% and fallsback to auto.
To have both sticky footer and REAL fullheight #main-container (instead of faking with background) you have to use display:table and display:table-row. This works because when you use display:table, height:100% works just as your regular min-height:100% and the display:table-rows inside will always stretch to use all the vertical space available.
NOTE: this is different from using html tables, because in this case you don't need to bloat your markup with non-semantic tags, as you'll see in the following example.
Here's the example HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="maincontainer" class="astable">
<div id="header" class="astablerow">
header
</div>
<div id="middlecontainer" class="astablerow">
content
</div>
<div id="footer" class="astablerow">
footer
</div>
</div>
</body>
</html>
And here's the CSS
html, body{
margin:0;
padding:0;
height:100%;
}
.astable{
display:table;
height:100%;
table-layout:fixed;
width:100%;
}
.astablerow{
display: table-row;
}
#header{
height:30px;
background-color:#00ff00;
}
#footer{
height:30px;
background-color:#0000ff;
}
#middlecontainer{
background-color:#ff0000;
}
I think that min-height doesn't work due to a reported bug. See this: stackoverflow.com/questions/8468066.
An easy way to create the illusion that #main-container grows till the end, is to set #wrap's background-color the same value as #main-container's.
I'm trying to create a site very much like in this picture:
Layout Image on Dropbox
The Problem:
I need the site to scroll horizontally, as suggested in the image.
I also need the vertically scrolling elements to scroll, but inside the element itself, not the entire site. When I scroll up/down in the first frame of the site, it scrolls down to a blank area because the second frame is so tall and forces the entire site to be as tall as the tallest element.
HTML structure:
div #horizontal-container
div #horizontal-wrapper
div #section-1 .section
div #section-2 .section
div #section-3 .section
so on...
CSS:
html, body {
overflow: hidden;
}
#horizontal-container {
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
overflow-y: hidden;
overflow-x: scroll;
}
#horizontal-wrapper {
width: 400%;
height: 100%;
}
.section {
width: 25%; /* A quarter of its parent with 400%, to be 100% of the window. */
height: 100%;
float: left;
overflow-y: scroll;
}
Hopefully I made it clear here. What am I missing to get this working? Should I maybe incorporate a little JavaScript to toggle the overflow property of the container when I hit certain horizontal scroll points? That sounds messy. :/
height=100% will not introduce scroll to sections
You have to assign different heights to sections based on there content.
Check by javascript If height of section is more than window height then assign window height to the section height.
You can try this code to generate fixed width content blocks with horizontal scroller. You can see the parent post here
<html>
<title>HTMLExplorer Demo: Horizontal Scrolling Content</title>
<head>
<style type="text/css">
#outer_wrapper {
overflow: scroll;
width:100%;
}
#outer_wrapper #inner_wrapper {
width:6000px; /* If you have more elements, increase the width accordingly */
}
#outer_wrapper #inner_wrapper div.box { /* Define the properties of inner block */
width: 250px;
height:300px;
float: left;
margin: 0 4px 0 0;
border:1px grey solid;
}
</style>
</head>
<body>
<div id="outer_wrapper">
<div id="inner_wrapper">
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<!-- more boxes here -->
</div>
</div>
</body>
</html>
Please, consider the following jsFiddle - http://jsfiddle.net/mark69_fnd/hwCuB/ (you can find the code after the body of the question).
It represents a trivial example of the classic header, content, footer HTML layout. Notice that:
The content never overlaps with the footer. Resizing the window will finally create a vertical scrollbar rather than move the content over the footer.
There are no redundant scrollbars.
No absolute heights, except of the footer, which may be assumed to be no higher than 2em.
The content height is less than the available height between the header and the footer.
I would like to keep the first three properties, but change the last one, so that the content height is the full height between the header and the footer. And I would like to do so without resorting to javascript.
How can I do so, if at all?
EDIT
The given html and css are just an example. You are free to change them as long as the final result satisfies the conditions of my question.
EDIT2
Apparently, I am not very clear on what I want to achieve with the content. Here is what I have now:
Notice how the content does not extend the full height available to it between the header and the footer.
What I am after is this:
(edited in mspaint, I do not know to do it really)
EDIT3
Added an except clause to the 3rd condition:
except of the footer, which may be assumed to be no higher than 2em.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.7.3/build/cssreset/reset-min.css">
</head>
<body>
<div class="container">
<div class="header">
Header goes here.
</div>
<div class="content">
<div class="innerWrapper">
Content goes here.
</div>
</div>
<div class="footer">
<div class="status">
Footer goes here.
<div>
</div>
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
width: 100%;
}
.container {
position: relative; /* needed for footer positioning*/
margin: 0 auto;
height: auto;
min-height: 100%;
background-color: #ddd;
}
.content {
padding: 0em 0em 2em; /* bottom padding for footer */
background-color: #bbb;
}
.footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */
}
.status, .header {
background-color: #999;
border: solid 1px #000000;
}
There might be couple ways to do this, but the only ways i can think of at the moment all involve setting/knowing the height of your header and footer.
Here is one using display:table http://jsfiddle.net/fLnkf/
There may be other solutions depending on if your requirements allow you to change your html or use CSS3.
hope this helps!