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>
Related
Is it possible to specify the max-height of a DIV with position:absolute such that if it would reach past the viewport downwards, a scrollbar appears?
I.e., to user "overflow-y: scroll;" without having to specify the height statically? (Such that it works even if you resize the window.)
Here's what I mean: https://jsfiddle.net/x5efqtv2/2/
(And also see below)
P.S.: I could solve it with JavaScript, I'm interested in pure CSS solutions, if there's any.
Thanks!
div {
border: 1px solid red; /* just to see where the DIVs exactly are */
margin: 5px; /* ditto */
}
.float-over-content {
position: absolute;
max-height: 100px;
overflow-y: scroll; /* works with static max-height only? */
z-index: 10;
background-color: white;
}
<body>
<div id="upper">This one is above the position:absolute one</div>
<div style="position: relative">
<!-- this is needed for position:absolute below to put the div under "upper" -- or so I think -->
<div class="float-over-content">
<!-- I WANT TO DEFINE THE MAX-HEIGHT OF THIS DIV SUCH THAT IF IT REACHES THE BOTTOM OF THE VIEWPORT, A SCROLL BAR SHOULD APPEAR: (AS OPPOSED TO NOW, WHEN ITS HEIGHT REACHES 100px) -->
Make this reach exactly to the bottom<br/>
<!-- X times... -->
Make this reach exactly to the bottom<br/>
</div>
</div>
<div id="lower">
This one is "behind" the position:absolute one (it partially covers this one)
</div>
</body>
What Temani said in the comment. Use the calc function and the view height (vh) of the viewport. Check out the code snippet below. I added a button that will add more lines of text to the element and you can see it expand to fit the viewport with the overflow becoming scroll content.
document.getElementById("add-a-line").addEventListener("click", function(){
document.getElementById("float-over-content").insertAdjacentHTML('afterbegin','Make this reach exactly to the bottom<br/>' );
});
div {
border: 1px solid red; /* just to see where the DIVs exactly are */
margin: 5px; /* ditto */
}
#float-over-content {
position: absolute;
max-height: calc(100vh - 47.4px);
overflow-y: scroll; /* works with static max-height only? */
z-index: 10;
background-color: white;
}
#add-a-line{
position:fixed;
right: 0;
width: 200px;
height: 20px;
background-color: #0f0;
}
<body>
<div id="upper">This one is above the position:absolute one</div>
<div style="position: relative">
<!-- this is needed for position:absolute below to put the div under "upper" -- or so I think -->
<div id="float-over-content">
<!-- I WANT TO DEFINE THE MAX-HEIGHT OF THIS DIV SUCH THAT IF IT REACHES THE BOTTOM OF THE VIEWPORT, A SCROLL BAR SHOULD APPEAR: (AS OPPOSED TO NOW, WHEN ITS HEIGHT REACHES 100px) -->
Make this reach exactly to the bottom<br/>
<!-- X times... -->
Make this reach exactly to the bottom<br/>
</div>
</div>
<div id="lower">
This one is "behind" the position:absolute one (it partially covers this one)
</div>
<div id="add-a-line">
Click to add a line
</div>
</body>
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.
So. My code is something along the lines of
<html>
<body>
<div id="header" style="width:100%;min-height:0;display:block;background-color:#000">
<img src="header_image.svg" />
</div>
<div id="content" style"display:block">
Some content
</div>
</body>
</html>
I have an svg in the header that I have set so that it matches the width of the window and the height scales to preserve the svg. Then I have the rest of the page in another div. I would like it so that the page doesn't scroll and this content div fills to fit the rest of the window. The problem is that since the height of the header changes with the width of the window, I can't set the content div in pixels or percentage or anything concrete.
How can I set the height of the content div to change dynamically with the height of the header?
I don't know Javascript or JQuery (I know, I know - I should), but ideally the height of the content div would be set to be something like height:(height of viewport)-(height of header), but I haven't a clue how to do this.
you don't have to use a script for that.
and also: I recommend you to separate your styling from your markup.
HTML
<div id="wrapper">
<div id="header">
<img src="header_image.svg" alt="the img is empty"/>
</div>
<div id="content">Some content</div>
</div>
add this to your CSS
html, body {
height: 100%;
margin: 0px;
}
/* this is the big trick*/
#wrapper:before {
content:'';
float: left;
height: 100%;
}
#wrapper {
height: 100%;
background-color: black;
color: white;
}
#header {
background-color:#000;
}
#content {
background-color: gray;
}
/* this is the big trick*/
#content:after {
content:'';
display: block;
clear: both;
}
Working Fiddle
Tested on: IE10, IE9, IE8, FF, Chrome.
didn't use absolute positioning
didn't use Script (Pure CSS solution)
fluid layout
cross-browser
Explanation:
with pseudo element, I'm creating a floating element (without content or width, so he's invisible)
that has 100% of the container height.
and with another pseudo element I'm creating a div just after the content div. (also without content, so he's also invisible) that has the clear attribute. so he has to be below the floated one I've created earlier. making the content to go all the way down.
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!