I followed a tutorial/instructions online to make a sidebar fixed position by making the sidebars position "fixed" and it worked fine. Now I realize that since my page has a min-width attribute, when the user scrolls sideways the content that doesn't move moves into the sidebar. So basically, I'm looking for a way to produce a fixed sidebar when your scrolling down, but when you move sideways the content doesn't jump into the sidebar. My code is kind of like the following:
CSS
#sidebar {
position:fixed;
height:500px;
width: 100px;
background-color: blue;
}
#content {
width:100%;
box-sizing:border-box;
margin-left:100px;
background-color:purple;
}
Html
<div id="sidebar">
</div>
<div id="content">
</div>
JSFiddle: http://jsfiddle.net/znCF3/1/
NOTE: This is not my actually code but a minified version of it because my code is really complex. Also, I can't just use a fluid layout.
As said by others, not possible with only css and html. However, you can do this with javascript/jquery.
Just encase you want to use jquery to do this, first as watson said, change index of side bar (I had to make negative), just encase it jquery doesn't work for whatever reason for someone.
Then add to your <head>:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
<!--
$(document).ready(function() {
$(window).scroll(function(){
var offSet = - ($(this).scrollLeft());
$('#sidebar').css('left', offSet);
});
});
//-->
</script>
Example
Check out this fiddle: http://jsfiddle.net/NfKca/
Modified css as:
#sidebar {
position:fixed;
height:500px;
width: 100px;
background-color: blue;
}
#content {
box-sizing:border-box;
background-color:purple;
position:absolute;
left:100px;
}
You could set the z-index: 1; on the sidebar. If this doesn't help, it would be great if you could make a jsfiddle to illustrate what you mean more.
Related
Thank you all for your help so far. I updated the description, concept image, and JSFiddle link to make things a little clearer.
I have been wracking my brains on this seemingly small issue the whole day. My web dev friends are baffled and I could not find a suitable answer in my search of this site and others (though, I could have missed it somewhere along the way).
Here's what I am trying to achieve:
3 non-fixed-width DIVs within one fixed-width container DIV
The center DIV needs to be centered, and no larger than the text it contains.
The left and right DIVs need to fill the remaining space in the container DIV.
Here are some links to help communicate this concept:
This is what I'd like to end up with
Check out this JSFiddle Link
The basic HTML:
<div id="container" >
<div id="left" ></div>
<div id="center" >Text inside center should resize this block</div>
<div id="right" ></div>
</div>
Below, I removed most of the styles I have tried. This CSS currently centers the DIV (if I set it as an inline block), but I need the other divs to fill the left and right space remaining:
#container {
width:750px;
text-align:center;
border:3px solid #E85355;
}
#left {
background-color:#A3CB46;
}
#center {
background-color:#6D6E71;
display:inline-block;
color:#FFFFFF;
}
#right {
background-color:#1DB0CE;
}
I've tried floating, no-wrap, overflow, etc. Thanks a million to whomever can offer some help!
Try the following CSS. It fills the width of the container...
#container {
width:764px;
text-align:center;
}
#container > div {
display: table-cell;
}
#center {
background-color:#CDD7D7;
}
#right, #left {
background-color:#E85355;
width:200px;
}
EDIT: display:table on container, not needed...
Do you need this ?
CSS
#container {
width:764px;
text-align:center;}
#left {
background-color:#E85355;
width:20px;
height:20px;
float:left;
}
#center {
background-color:#CDD7D7;
display:inline-block;}
#right {
background-color:#65A8A6;
width:20px;
height:20px;
float:right;
}
DEMO
Try this:
jsfiddle.net/SHnc9/36/
You can do it with flexbox! Demo: http://dabblet.com/gist/7187048
Markup
<div class='container'>
<div class='box left'></div>
<div class='box center'>enter text here to see this box grow!</div>
<div class='box right'></div>
</div>
CSS
.container {
display: flex;
}
.box {
flex-grow: 1;
}
.center {
flex-grow: 0; /* to get the box to wrap closely around the text */
}
According to caniuse.com http://caniuse.com/#search=flexbox, it's supported in all the major desktop browsers with firefox having partial support which probably means it uses the old syntax / doesn't support some new properties but the demo worked fine when I checked.
Just be sure to use prefixes(or use a prefixfree / unprefix plugin), add the old syntax for old browser versions (add old syntax below the new ones).
Also, use display: inline-block as a fallback.
You may also want to check out flexie.js http://flexiejs.com/.
Essential reading:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am using ng-view, to display view based on the routeProvider. In my application, ng-view added like this
<div ng-view style="height: 100%; background:#000000;"></div>.
In one of my views, there is a left navigation, which should displayed 100% in height in the browser. For some reason, left view navigation height is created only based upon the data. That is if data is more, height is incremented.
I am not sure, why height is not incremented even though I set hieght=100%, here is the code of Left navigation
<div class="options1">
<div class="options">
<a ng-repeat="name in list" >{{name.name}}</a>
</div>
</div >
.options {
background:#FFFFFF;
min-height: 190px;
width:10em;
height:100%;
border: 1px solid red;
color:#FFFFFF;
}
.options1 {
min-height:100%;
background:red;
width:15em;
}`
I got it working, it is an CSS issue.
I have added this into CSS,
html, body { height: 100%; width: 100%; margin: 0; }.
Here is the link for more details
Css height in percent not working
use Viewport Height, it's absolutely
style="height: 100vh;"
This isn't an angularJS issue, but most likely a CSS styling issue. If it is so, then you need to investigate it as such - there isn't much information to go on in your question, but a div stretches to 100% of it's parent, so you need to make sure that is happening. Also, positioning is very important.
If this is the case, there is no need to duplicate an answer - see if this other SO answer is of any help.
I think css:
.ng-scope{
height: 100% !important;
}
On my computer it works correctly,
for reference only
I want a small div to stick to the bottom right corner of the browser. This I accomplished by doing this:
#div {
position: fixed;
bottom: 10px;
right: 10px;
}
But I've a footer, say height: 200px;. What I want is that when you scroll down the page the div stays in the bottom right corner, but when the footer pops up on the bottom of the page, I want the footer to push it upwards so it won't come in front of the footer.
I hope I made myself clear...
It took me a while, but i think i got the answer for you :)
You should add JQuery to your HTML by adding this line, below the line where you add the css file:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
and then create a file scrollBottom.js (javascript file), and add that too like this:
<script src="scrollBottom.js" type="text/javascript"></script>
In that file you add the following code (edited: document.ready should be added):
$(document).ready(function() {
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height()-200) {
$('#div').css('bottom', $(window).scrollTop()-2360);
}
else
{
$('#div').css('bottom', '10px');
}
});
});
working example:
http://jsfiddle.net/4VJtU/4/
Love that this can be done without jscripting now. :)
Just a few lines of CSS and some wrapper adjustments:
http://jsfiddle.net/bitofgrace/QGEUv/
<div id="wrapper">
<div id="flyover">hi</div> <!-- the content you want to stick in the corner -->
<div class="content"> Body of page content</div>
<div ID="footer"> FOOTER CONTENT</div>
</div> <!-- close wrapper -->
The CSS
#wrapper {width:100%; height:100%; margin:0}
#flyover {background-color:pink; color:white; position:fixed; top: 87.5%; z-index:4;}
#footer {background:green; position:relative; height:100px; width:100%; bottom:0; z-index:1;}
Let's say I have a <div> (#container) that's set to 960px for it's width. Inside that <div> , I want to create another <div> (#drawer) that's as wide as the page window. So basically, I would like to create a <div> within a <div> that's wider than its parent <div>:
<div id="container"> // Set at 960 px
<div id="drawer"> // I'd like this to be as wide as the window
</div>
</div>
CSS:
#content {
top:200px;
position:absolute;
width: 940px;
padding-bottom:100px;
}
#drawer {
????
}
---Update---
Hey Everyone,
Thanks for all the answers. I guess I should make my answer a little easier to follow. See below for some sort of visual description. I hope it helps!
Well you could set botht he left and right values if you make it absolutely positioned. This way you can still use padding directly on the #drawer if you want to.
#container {
top:200px;
width: 940px;
padding-bottom:100px;
background-color:rgb(255,0,0);
}
#drawer {
position:absolute;
right: 0px;
left:0px;
background-color:rgb(0,255,0);
}
I don't think it's possible for a child div to be wider then its parent. Maybe if you told us what you were trying to accomplish, we could help you.
i dunno what you're trying to do with that. But, i think this code works (by just removing "position : absolute" in #content :
<html>
<head>
<style type="text/css">
#content {
top:200px;
width: 940px;
padding-bottom:100px;
}
body {
margin:0px;
padding:0px;
}
#drawer {
background-color:blue;
top:0px;
position:absolute;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="content">
<div id="drawer">
a
</div>
</div>
</body>
</html>
you can find out the width of the screen on pageload using javascript and then set the css width value to the same. this is a bad way of doing it....but its still a way. Why do you need to do this btw ?
I second rudeovski ze bear's comment. However, if you want to do this, you'll need to set the width explicitly (you can't rely on width: 100%, because it will always use the containing div for reference).
So you'll need something like:
#drawer
{
width: 1200px;
}
You can use a little jQuery to make this more dynamic:
$(function() {
var windowWidth = $(window).width();
$('#drawer').css('width', windowWidth);
});
You can use negative margins and calc() to calculate the 100vw - container width, all negated and divided by 2 for the left and right margin.
Because you know the width of your parent container, 940x in this case, the negative margins for the #drawer would be:
margin-left: calc(-100vw / 2 + 940px / 2);
margin-right: calc(-100vw / 2 + 940px / 2);
Tip!
To make it nicer, you can use a variable for 940px. If you use SASS, I'm sure you already know how to use variables there.
If you use CSS:
:root {
--container-width: 940px;
}
and then:
margin-left: calc(-100vw / 2 + var(--container-width) / 2);
margin-right: calc(-100vw / 2 + var(--container-width) / 2);
(Before using var, please ensure it is supported by the browsers you need: https://caniuse.com/css-variables)
You can watch it in action here, but please make sure your page is wider than 940px: https://stackblitz.com/edit/js-jscs4f
I'm having a problem with my site http://artygirl.co.uk/pixie/about/ I can't seem to get the footer to automatically stick to the bottom of the browser, and show the rest of my background.
Is there a solution better than using position:fixed or absolute?
I think there are possibly other styles over-riding some tests I do in firebug.
Thanks for your help
Regards
Judi
CSS:
.podbar {
bottom:0;
position:fixed;
z-index:150;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+
(document.documentElement.clientHeight-this.offsetHeight)));
height:35px;
}
HTML:
<div class="podbar">
Put your footer here
</div>
This will create a sticky that will always appear at the bottom of the page and overlay everything. Just add extra margin/padding to the bottom of your main container divs equal to the height of footer +5px so it doesn't overlay your content.
Works in pretty much every browser I have tested.
I've used the technique in this article before: CSS layout: 100% height with header and footer. It does require some extra markup in your HTML.
This is always a bit difficult, you could increase the min-height of your content area, but even then if someone has a really big screen you'd see the same thing.
You could use a bit of JavaScript to increase the min-height if someone has a huge viewport but that's still less than elegant. I'm not sure if there is a CSS-only solution to this.
If you want to try the above the code I just posted here: Is detecting scrollbar presence with jQuery still difficult? may be of use to you.
Set the height of html and body to 100%, insert a container div with min-height 100% and relative position, and nest your footer with position: absolute, bottom: 0;
/* css */
html, body {
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#footer {
position: absolute;
bottom: 0;
}
<!-- html -->
<html>
<head></head>
<body>
<div id="container">
<div id="footer"></div>
</div>
</body>
</html>
Here you have an example and explanation http://ryanfait.com/sticky-footer/
Edit: Since that site is offline, here is another example of this working: https://gist.github.com/XtofK/5317209 and https://codepen.io/griffininsight/pen/OMexrW
document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('nav');
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
border: 1px solid #ff00ff;
height: 50px; /* '.push' must be the same height as 'footer' */
}
footer {
}
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
You could set a min-height on #content. This won't fix the footer to the bottom of the browser specifically, but will ensure that you can always see a certain amount of the background.
As an alternative, using JavaScript, you could determine the height of the browser window and then calculate the min-height for #content, and apply it using JavaScript. This would ensure the footer is always in the correct place.
I've figured it out. Html had a css property for the background saying the colour white.
I always prefer page wise footers because of variable content on pages. I use a top margin of 5em for my footers. Most often than not, we know the height of content that can occur on pages.
If you use the Compass library for Sass, there is also another option. You can use Compass’s sticky-footer mixin (demo). It requires that the footer be fixed-height, and that your HTML has a certain general structure.
Don't use position:absolute use position:relative instead.
.footer {
z-index:99;
position:relative;
left:0;
right:0;
bottom:0;
}
position: absolute will stick it to the bottom of the screen while position relative won't ignore other divs, so it will stay at the bottom of the full page.