How can I make a sticky sidebar with a footer that doesn't move when the page is scrolled. I tried this css but its making the sidebar not appear at all.
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background-color: #F8F8F8;
}
But the sidebar isn't showing up at all. I have a fiddle of a working demo: https://jsfiddle.net/DTcHh/15259/
You can try this;
nav {
position: fixed;
left: 0;
top: 0;
bottom: 0;
background: whatver;
width:whateverpx;
padding: 10px;
}
rename the nav as necessary for your page.
Related
I have an iFrame, which I wish to align to the bottom right of the browser window. The following CSS actually achieves this in the first instance.
However, if the page the iFrame is initiated from has a horizontal scroll bar, the iFrame remains at the same vertical position.
.iframe {
position: absolute;
top: 100%;
right: 0%;
width: 535px;
height: 380px;
margin-top: -400px;
margin-right: 20px;
z-index: 999;
}
Is it possible to position is so its always aligned to the bottom of the browser window?
try with fixed position
.iframe {
position: fixed;
bottom: 10px;
right: 20px;
width: 535px;
height: 380px;
z-index: 999;
}
Remove margin and top, change right: 0 and add bottom: 0. Try this I hope it'll help you out. Thanks
.iframe {
position: absolute;
bottom: 0;
right: 0;
width: 535px;
height: 380px;
z-index: 999;
}
<iframe class="iframe"></iframe>
I have the following HTML
<div class="first-use-overlay overlay-bg hide">
<div class="first-user-overlay-shell">
.....
</div>
</div>
and the following css
.first-user-overlay-shell {
width: 90%;
min-width: 1200px;
max-width: 1380px;
z-index: 1000;
overflow: scroll;
position: absolute;
top: 0;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
.overlay-bg {
z-index: 105;
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: rgba(0,0,0, 0.8);
}
Basically, when I click a button it opens up an overlay with a div (first-user-overlay-shell) that is another page of the side.
I added a no scroll to the body of the page.
I'm trying to make it so that content inside first-user-overlay-shell scrolls though the body has a no-scoll css. How can I do that?
Just try this one, add 1 div after first-user-overlay-shell then add height or just check this fiddle.
I'm trying to lay out some CSS to build a site to look like a fairly typical desktop app type layout:
I've almost got it all working, however I'm having problems getting the scrollable panel to stick to the bottom of the viewport and display with a scrollbar instead of overflowing off the page.
The HTML and CSS I have so far is:
HTML
<nav></nav> <!-- Fixed height header -->
<aside></aside> <!-- Fixed height/width sidebar -->
<main><!-- Right content area container -->
<div class="top"></div> <!-- Right side top adjustable height panel -->
<div class="toolbar"></div> <!-- Fixed height toolbar -->
<div class="content"></div> <!-- Scrollable panel -->
</main>
CSS
nav {
width 100%;
height: 40px;
}
aside {
width: 260px;
position: absolute;
top: 40px;
bottom: 0;
}
main {
position: absolute;
left: 260px;
top: 40px;
bottom: 0;
right: 0;
}
.top {
position: relative;
right: 0;
left: 0;
min-height: 200px;
}
.toolbar {
height: 30px;
position: relative;
right: 0;
left: 0;
}
.content {
position: relative;
top: 0;
bottom: 0;
overflow: auto;
right: 0;
}
With the CSS above, the scrollable panel will not stay within the confines of the viewport and display a scrollbar. I'm hoping to find a javascript-less solution (it's all living in an angular app so I'd like to avoid relying on javascript for positioning if I can avoid it)
You can create this layout easily using calc.
http://jsfiddle.net/q18k57zr/
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
background: #333;
}
aside {
position: fixed;
top: 40px;
left: 0;
width: 200px;
height: 100%;
background: #666;
}
main {
position: relative;
top: 40px;
width: calc(100% - 200px);
height: calc(100% - 40px);
margin: 0 0 0 200px;
background: #999;
}
.section-top {
height: 100px;
}
.section-toolbar {
height: 40px;
background: #fff;
}
.section-scrollable {
height: calc(100% - 140px);
overflow-y: scroll;
background: #ccc;
padding: 20px;
}
This is clearly just some demo code. Not intended to be used, but you'll get the idea. There are a bit of magic numbers in there, but this can easily be set up as variables with Sass/LESS and just do a bit of math.
i would like to use a website with fixed header/footer and a scrollable div in between.
Only the div in the middle should scroll, no scrollbar for the whole site (that's why body overflow is hidden).
My attempt so far:
#container1 {display:block;padding-top:60px;overflow-y:scroll}
#container2 {display:none;padding-top:60px;overflow-y:scroll}
body{overflow:hidden}
The scrollbars are shown but too much on the right, also they are not scrollable?
PS: Unfortunately the switching between the DIVs don't work at JSFiddle, don't know why...
If the header and footer have explicit heights, it could be achieved simply by positioning the middle DIV absolutely and using top/bottom offsets with the respect to the height of the header/footer.
Then we can add overflow-y: auto to the middle DIV — Example:
#divLinks {
overflow-y: auto;
position: fixed;
top: 25px;
bottom: 40px;
width: 460px;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
}
#divLinks {
overflow-y: auto;
position: absolute;
top: 25px;
bottom: 40px;
left: 0; right: 0;
}
#page{height: 100%;width:480px;margin: 0 auto; position: relative;}
#header{position:absolute;top:0;left: 0;right: 0;z-index:998;height:25px;background:#5f5f5f}
#bottom{position:absolute;bottom:0;left: 0;right: 0;z-index:999;height:40px;background:#5f5f5f}
<div id="page">
<div id="header">Header</div>
<div id="divLinks">
<div id="container1">First<br><br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br></div>
<div id="container2"> second<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1</div>
</div>
<div id="bottom">First Page - Second Page</div>
</div>
The easiest way, in my opinion, is to use fixed elements, like this:
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
and
body {
margin: 0;
overflow: hidden;
}
header {
position: fixed;
top: 0;
left: 0;
background-color: red;
width: 100vw;
height: 2em;
}
main {
position: fixed;
top: 2em;
left: 0;
width: 100vw;
height: calc(100vh - 4em);
background-color: green;
y-overflow: auto;
}
footer {
position: fixed;
bottom: 0;
left: 0;
background-color: blue;
width: 100vw;
height: 2em;
}
I am trying to make a simple web-application, but I am having some troubles with the positioning of my div's
I tried to make it so I have 1 large bar on the top with a 100% width, 1 large bar at the bottom with a 100% width and a navigation menu on the side that is stuck to the left and fits exactly between the other two bars. I also want it to stay where it is when I scroll down.
The code I used for the navigation menu is
{background-color: blue;
position: fixed;
width: 15%;
height: 80%;
margin-top: 7%;
margin-bottom: 3%
}
for the top bar
{background-color: red;
position: fixed;
width: 100%;
height: 7%;
margin-top: 0;
margin-bottom: 93%;
}
and for the footer
{background-color: green;
position: fixed;
width: 100%;
height: 3%;
margin-top: 97%;
margin-bottom: 0;
}
the div's are al placed in the body like this
<body><div id="top"></div><div id="menu"></div><div id="footer"></div></body>
the menu is placed fine this way but the header and footer are stuck to the top of the page.
Thank you anyone who can help me out
With position:fixed you'll need to specify the top/bottom and left styles. I don't think you'll need those margin styles.
#menu {
background-color: blue;
position: fixed;
width: 15%;
height: 90%;
top: 7%;
left: 0;
}
#top {
background-color: red;
position: fixed;
width: 100%;
height: 7%;
top: 0;
left: 0;
}
#footer {
background-color: green;
position: fixed;
width: 100%;
height: 3%;
bottom: 0;
left: 0;
}