I am trying to create two column layout with header and footer so that left bar, header and footer remains fixed and horizontal and vertical scroll should appear on main content on auto what i have achieved so for is
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css">
.header{width:100%;}
.left_panel{float:left; width:15%; height:500px; overflow:auto;background-color:#99CCFF;}
.right_panel{float:left; width:85%; height:500px; overflow:auto;background-color:#FFFFCC;}
.footer:{width:100%;margin-top:5px;}
</style>
</head>
<body>
<div class="header">
<h3>HEADER!</h3>
</div>
<div class="left_panel">Left Panel</div>
<div class="right_panel">
<p class="grey">
Main content
</p>
</div>
<div style=""></div>
<div class="footer"><h3 align="center">Footer!</h3></div>
</body>
</html>
Before the footer add in the empty div clear: both in the styling.
In this case you really won't need the clear: both because both the left nav and the main content have the same height, but mind you that the left nav also has overflow: auto and it will also show the scroll for that block (if you have a lot of content there).
The main content already has the scrolls, it depends on the amount of content.
I made this example http://jsfiddle.net/jackJoe/pADyc/, reducing the height of the main content so that you can see the effect.
EDIT: Just so you don't be confused, I changed the main content so that it has the original height, and with a lot of content, it obviously shows the vertical scrolls: http://jsfiddle.net/jackJoe/pADyc/1/
And now you may ask about the horizontal scrolls... Well, it will just show them if the content overflows horizontally, which only happens with block elements (div with a wider width, images, text that cannot be wrapped, you get the picture).
Related
I've set position: sticky in my header div to keep it on the top while scrolling. Adding also a top: 0px. And it works perfect.
But this header has a drop down menu which opens more submenu options using posotion: absolute, and its content is higher than the screen height (lot of options... long list). In that case, when I try to scroll down to see more options, what is scrolling is the page behind. And when it reaches the end of the page, then it starts scrolling the menu options.
What I would like is, when the drop down menu is open, scrollt it, and not the page behind.
How could i change this behavior?
Small code sample:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#header {
position: sticky;
top: 0px;
background-color: #ffd800;
}
</style>
</head>
<body>
<div id="header">
<div id="Menu">
</div>
</div>
<div id="page">
(some content)
</div>
</body>
</html>
In the Menu div there is an option which opens a long list of more options, taking more space than the available in the screen (imagine it in a mobile device). Then I start to scroll down to reach these hidden options at the bottom of the screen, but the screen seems static, because what is scrolling is the Page div behind the menu. When the end of Page div is reached, then starts scrolling down the menu.
What i need is to scroll the menu options when the submenu is open.
I am using core-animated-pages. Some of the the content on the pages will need to be scrolled. I want to set the background color for the pages and I want the background color to cover the scrolled area and not just the current viewport. How do I accomplish this?
More specifically I have:
<core-animated-pages flex transitions="cross-fade-all">
<div>Some small content</div>
<div>Some long text that will need to be scrolled</div>
<div>Another page</div>
</core-animated-pages>
So how do I style so that the background color will cover the scrolled text?
#jeff provides a large part of the answer in specifying relative on the div. Additionally I used the following CSS to position the element clear of title bar above and to ensure the background covers the reminder of the page.
#instructions {
background: #FFF59D;
min-height: calc(100vh - 200px);
top:+30px;
padding:10px;
width:calc(100% - 24px);
}
The pixels subtracted from the % values and the top:+ allow for a menu bar at the top and the padding on the body -- these will need to be adjust depending on the height of the menu bar and the padding.
Now I would like to wrap the divs in paper-shadow but I find when I do this I lose the background. How can I apply a paper-shadow effect to the divs?
The <content> within <core-animated-pages> is styled with position: absolute + top/right/bottom/left: 0. You're not providing the rest of your HTML structure and any other styles that you have defined, but I'm assuming that's what's causing what you're seeing.
Try styling the DOM element that represents the page to use position: relative (you can do this by assigning it the Polymer-shorthand relative attribute):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Polymer core-animated-pages Demo</title>
<style>
core-animated-pages > div {
background-color: orange;
}
</style>
</head>
<body>
<script src="//www.polymer-project.org/webcomponents.js"></script>
<link rel="import" href="//www.polymer-project.org/components/core-animated-pages/core-animated-pages.html">
<core-animated-pages selected="1" transitions="cross-fade-all">
<div>Some small content</div>
<div relative>
<h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1>
</div>
<div>Another page</div>
</core-animated-pages>
</body>
</html>
I need to make my footer stay on the bottom but also have it not interfere with my content. As seen in the jfiddle, the blue box interferes with the footer. After looking through all the current threads and trying to fix my CSS and HTML, I could not find my solution. I tried changing the position to fixed, adding some padding, etc. Below is my code:
http://jsfiddle.net/9A2gL/8/
Basically I have:
<html><div id="wrapper"><header></header>
<body></body>
<footer></footer></div></html>
I do have floating divs but I used clearfix so clear: both;
Also, please read this: I do have a valid HTML structure but jsfiddle doesn't recommend the tags to be placed. Please focus on the floating aspect as when I take float:right;in the CSS off of the .news it is working. When I remove the code to make the footer stick at the bottom of the page, it also works.
Your HTML Mark is Messed Please first of all W3C Stabdards, and correct your HTML Markup some thing like this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<header></header>
<footer></footer>
</body>
</html>
Sencond for your footer please apply clearfix class there after proper markup or just
.Clear{
clear:both;
}
You are good to go (y).
I understand it was a fiddle (THANK YOU!), but your HTML tags are out of place. That being said, the image I see from your fiddle is as follows
<div id="wrapper">
<div id="container">
<!-- REMOVED body HTML tag-->
<div id="content">...</div>
<aside>
<div class="advert">..</div>
<div class="news">..</div>
</aside>
<!-- End Container -->
</div>
<div class="clearfix">..</div>
<footer>..</footer>
<!--End Wrapper-->
</div>
edit
Add bottom margin to your aside.
The clearfix div should be added before the end div of container.
Try the following code:
<!DOCTYPE html>
<html style="min-width:600px; overflow:auto;">
<body style="background:grey; padding:0px; margin:0px;">
<div style="text-align:right;">
this is some text
</div>
<div id="footer" style="
background:yellow;
position:fixed;
height: 100px;
width:100%;
min-width: 600px;
text-align:right;
bottom:0px;
">
footer text
</div>
</body>
</html>
So when I make the width of the browser window less than 600px, a horizontal scroll bar appears at the bottom of the window as expected. When I scroll to the right, the phrase "this is some text" scrolls into view, which is great. However, the phrase "footer text" does not scroll into view, which is the problem.
How do I get both the "footer text" and "this is some text" to scroll into view as I drag the window scroll bar to the right? THe yellow footer must always appear at the bottom of the website.
I would prefer a clean CSS solution to this. I will accept a javascript solution if absolutely necessary.
Thanks
It's because for fixed elements the containing block is not en element but the viewport (cf. http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning)
You should try the method described here which use absolute positionning: http://alistapart.com/article/footers
OP says:
Thanks. I used jquery by doing $(window).scroll(function(){$('#footer').css('left', parseInt(-1*$(window).scrollLeft();)+'px');}); I guess that was easy enough
Take out the min-width on your second div. That will allow the footer text to always show no matter what the size of the viewport.
I'm trying to solve a scrollbar problem.
I had the problem that I wanted to have three divs aligned vertically and that the middle one will have the space left of the footer and the header
This post helped me with this part: Middle div with 100% in CSS?
The things is that I need that the content div (the middle div) show a scrollbar when the content overflows the middle div space.
Now I have this: http://jsfiddle.net/rv4XS/31/
<body>
<div id="wrap">
<div id="container">
<div id="header">header
</div>
<div id="content">data<br/>
data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>data<br/>
</div>
</div>
</div>
<div id="footer">footer
</div>
</body>
Thanks for the help.
EDIT 1: Only firefox and chrome, No IE.
EDIT 2: Maybe I'm not explaining well my question: I have a header that has variable height based on the content it has, the footer has a fixed height. Now, knowing that the header has a variable height and that the footer has a fixed height, how can I make a middle div (content div) that takes all the space left by the footer and the header?
If the header increases its height a lot ... what will happen is that the middle div will not be visible but only the header and the footer. of course the idea is that if the middle div has some data inside and it is cropped, it has to show the scrollbar.
You can give #content as below :
Note : cannot give % as you gave.Then It Occupied whole height and width which the content has.
Correct One
#content {
width:100%;
height:100px;
overflow: auto;
}
I have updated JSFIDDLER