I'm making a div that needs to be fixed, 100% height and vertically center aligned. And it has to be done with Bootstrap 4. I've managed all of that, except adding padding. Whenever I add padding to the child div, the content goes offscreen. I've even tried
overflow-y: scroll
hoping it'll fix it, but nothing happens.
Because the code snipped is not showing everything as it should on here, here's a codepen link.
Can someone please take a look at my code and let me know what I did wrong?
.card {
color: #fff;
background: tomato;
position: fixed;
min-height: 100%;
/* height: 100%; */
width: 340px;
right: 0;
top: 0;
overflow: scroll;
}
.card-block {
padding: 100px;
margin: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="card rounded-0 d-flex justify-content-center">
<div class="card-block align-self-center">
<h1>This is a title</h1>
<h5>This is a subtitle</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in laoreet neque. Praesent tincidunt justo a magna tempor vulputate. Phasellus euismod feugiat sem. Nam tempus nec nisl id viverra. Cras blandit erat mauris. Cras non commodo quam. Mauris
auctor ligula vitae erat mollis, quis convallis diam consequat. Nullam ac magna vitae lorem elementum vehicula nec rhoncus nisl. Nullam dignissim at nunc a congue. Sed fringilla pulvinar consequat. Curabitur interdum, nunc in finibus auctor, tortor
libero facilisis felis, id maximus nibh ex eu nunc. Nunc in molestie lorem, bibendum maximus ipsum. Vestibulum ac finibus risus.</p>
This is a button
</div>
</div>
Just add bottom:0 to your class card-block
You need to add the properties just to card-block and not card
.card-block {
padding: 0px 40px;
margin: auto;
color: #fff;
background: tomato;
position: fixed;
width: 340px;
top: 0;
bottom:0;
right: 0;
overflow-y: scroll;
}
Feel free to change padding,margin and width. As they will still keep the scrolling intact.
Check this CODEPEN
Related
My problem is that I cannot center this image. I've tried margin: 0 and absolute positions but nothing seem to work. I'm kind of a rookie when it comes to html and css. I've cleared my tries to center it from the html and css.
I want the image to be centered even when the site window width changes so padding does not work.
This is my CSS
/* image and text setup container */
.container {
float: left;
position: relative;
width: 100%;
left: 0%;
right: 0%;
}
.imagetext {
text-align: left;
width: 5%;
position: absolute;
top: 8px;
right: 60px;
font-size: 18px;
}
img {
padding-right: 5px;
padding-right: 5px;
padding-bottom: 15px;
}
HTML
<!--Front page image and text-->
<div class="container">
<img src="Aberlady_Church.png" alt="Church" width="400" height="200">
<div class="imagetext">Hasellus tempus pretium efficitur mauris non magna volutpat
</div>
</div>
At the moment, the image looks like this: http://puu.sh/o706W/ed57f22e12.jpg
You can try something like this
<!--Front page image and text-->
<div class="container">
<figure>
<img src="http://lorempicsum.com/futurama/350/200/1" alt="Church" width="400" height="200">
<div class="imagetext">Hasellus tempus pretium efficitur mauris non magna volutpat
</div>
</figure>
</div>
CSS
/* image and text setup container */
.container {
position: relative;
width: 100%;
}
.imagetext {
text-align: left;
width: 5%;
position: absolute;
top: 8px;
color: #fff;
right: 80px;
font-size: 18px;
}
figure { position: relative; width: 400px; margin: auto; /* the width of your image */}
img {
padding-right: 5px;
padding-right: 5px;
padding-bottom: 15px;
}
I've added a figure and position the text in absolute position relative to this tag instead of the .container
Generally speaking, you are looking for
margin-left: auto;
margin-right: auto;
to horizontally centre a block level element within its container.
Please aware though, that you will complicate matters by adding float and position to its containing block, so try to avoid those unless you really need them.
I would try the following styles for that markup.
.container {
width: 100%;
}
.imagetext {
width: 5%;
font-size: 18px;
margin:0;
}
img {
margin:0;
padding-right: 5px;
padding-right: 5px;
padding-bottom: 15px;
}
You have a lot of errors and excess code. I recomend you to read some books about HTML, CSS to upgrade your level.
Here's an example of simply solve of your problem with minimum code. We add image wrapper .image_wrapper, that centered images and text inside it.
CSS
.image_wrapper {
text-align: center;
}
.imagetext {
font-size: 18px;
}
img {
padding: 5px;
}
HTML
<div class="container">
<div class="image_wrapper">
<img src="http://www.theimaginativeconservative.org/wp-content/uploads/2016/02/Pretty-Church.jpg" alt="Church" width="400" height="200" />
<div class="imagetext">Hasellus tempus pretium efficitur mauris non magna volutpat</div>
</div>
</div>
Check it.
https://jsfiddle.net/r1rh7wn4/
You might want to consider wrapping your image and it's associated text in a <div> to separate it from the rest of the page text. This will also allow you to center both elements, regardless of page width. Here's an example:
https://jsfiddle.net/Bendrick92/gyc2n5o5/
.container {
float: left;
position: relative;
width: 100%;
left: 0%;
right: 0%;
}
.imagecontainer {
width: 75%;
height: auto;
margin: 0 auto;
position: relative;
}
.imagecontainer img {
width: 100%;
height: auto;
padding-right: 5px;
padding-right: 5px;
padding-bottom: 15px;
}
.imagecontainer .imagetext {
width: 20%;
height: 100%;
position: absolute;
top: 0;
right: 0;
}
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at massa nunc. Aenean in ullamcorper dui. Cras sodales, enim at dapibus rhoncus, nisi nulla dapibus erat, sit amet mattis ipsum enim at felis. Donec ex orci, venenatis eu feugiat sit amet, blandit eget orci. Curabitur accumsan orci massa, vitae dictum eros facilisis nec. Aenean imperdiet urna sem. Vivamus venenatis sit amet ligula id auctor. Nunc erat purus, tincidunt at ex eleifend, aliquet feugiat sem. Nullam euismod magna in diam consequat iaculis. Nam scelerisque quam ullamcorper consectetur consectetur. Etiam interdum orci sollicitudin ornare dictum.</p>
<div class="imagecontainer">
<img src="http://www.topsailunitedchurch.nf.net/images/Church2.jpg" alt="Church" />
<div class="imagetext">Hasellus tempus pretium efficitur mauris non magna volutpat</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at massa nunc. Aenean in ullamcorper dui. Cras sodales, enim at dapibus rhoncus, nisi nulla dapibus erat, sit amet mattis ipsum enim at felis. Donec ex orci, venenatis eu feugiat sit amet, blandit eget orci. Curabitur accumsan orci massa, vitae dictum eros facilisis nec. Aenean imperdiet urna sem. Vivamus venenatis sit amet ligula id auctor. Nunc erat purus, tincidunt at ex eleifend, aliquet feugiat sem. Nullam euismod magna in diam consequat iaculis. Nam scelerisque quam ullamcorper consectetur consectetur. Etiam interdum orci sollicitudin ornare dictum.</p>
</div>
Or if you'd like the image text to be centered below the image:
https://jsfiddle.net/Bendrick92/gyc2n5o5/1/
.container {
float: left;
position: relative;
width: 100%;
left: 0%;
right: 0%;
}
.imagecontainer {
width: 75%;
height: auto;
margin: 0 auto;
position: relative;
}
.imagecontainer img {
width: 100%;
height: auto;
padding-right: 5px;
padding-right: 5px;
padding-bottom: 15px;
}
.imagecontainer .imagetext {
width: 100%;
height: 100%;
position: relative;
text-align: center;
}
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at massa nunc. Aenean in ullamcorper dui. Cras sodales, enim at dapibus rhoncus, nisi nulla dapibus erat, sit amet mattis ipsum enim at felis. Donec ex orci, venenatis eu feugiat sit amet, blandit eget orci. Curabitur accumsan orci massa, vitae dictum eros facilisis nec. Aenean imperdiet urna sem. Vivamus venenatis sit amet ligula id auctor. Nunc erat purus, tincidunt at ex eleifend, aliquet feugiat sem. Nullam euismod magna in diam consequat iaculis. Nam scelerisque quam ullamcorper consectetur consectetur. Etiam interdum orci sollicitudin ornare dictum.</p>
<div class="imagecontainer">
<img src="http://www.topsailunitedchurch.nf.net/images/Church2.jpg" alt="Church" />
<div class="imagetext">Hasellus tempus pretium efficitur mauris non magna volutpat</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at massa nunc. Aenean in ullamcorper dui. Cras sodales, enim at dapibus rhoncus, nisi nulla dapibus erat, sit amet mattis ipsum enim at felis. Donec ex orci, venenatis eu feugiat sit amet, blandit eget orci. Curabitur accumsan orci massa, vitae dictum eros facilisis nec. Aenean imperdiet urna sem. Vivamus venenatis sit amet ligula id auctor. Nunc erat purus, tincidunt at ex eleifend, aliquet feugiat sem. Nullam euismod magna in diam consequat iaculis. Nam scelerisque quam ullamcorper consectetur consectetur. Etiam interdum orci sollicitudin ornare dictum.</p>
</div>
You actually just need to apply a "display:block;" + "margin:0 auto;" to your image.
/* image and text setup container */
.container {
float: left;
position: relative;
width: 100%;
left: 0%;
right: 0%;
}
.imagetext {
text-align: left;
width: 5%;
position: absolute;
top: 8px;
right: 60px;
font-size: 18px;
}
img {
/* add this to make it center */
display:block;
margin:0 auto;
/* add this to make it center */
padding-right: 5px;
padding-right: 5px;
padding-bottom: 15px;
}
<div class="container">
<img src="Aberlady_Church.png" alt="Church" width="400" height="200">
<div class="imagetext">Hasellus tempus pretium efficitur mauris non magna volutpat
</div>
I have this fixed right side bar layout working perfectly for me for a long time, it works in most of the browsers and devices too.
But the recent chrome update to 45 which happened few days ago, broke the layout by adding a horizontal scrollbar.
There are different ways to achieve the fixed right side bar layout, but this layout needs to extend the background color of main and side columns to the browser width extent with fixed max-width container(marked in red) and with shadow between columns.
And this below code was the best way I could achieve it.
Now all I need is no scrollbar in Chrome 45, I tried different ways to avoid it but none works. I know this wont be a easy fix, but any help on this would be appreciated.
http://jsfiddle.net/chetanjk/ptuxn2dq/
HTML
<div class="container" style="background:#000; color:#fff; text-align:center">
------page content max width for reference ----
</div>
<div class="page-cols">
<div class="container ">
<div class="cols-wrap">
<section class="main-col">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ipsum sapien, tincidunt ac augue sodales, consequat sodales elit. Nunc pharetra eget velit sed pharetra.
</section>
<aside class="aside-col">
<div class="pack">
Sed luctus nisl ut ipsum scelerisque semper. Nullam euismod eros vitae odio viverra tristique. Nam pulvinar massa at diam congue, vitae fringilla neque varius. In molestie quis neque luctus facilisis.
Vestibulum sit amet mi ut odio condimentum dictum vel a metus. Morbi ultrices enim ut accumsan lacinia. Praesent augue purus, bibendum in odio in, pharetra consectetur mi. Vivamus ac arcu dignissim, placerat ipsum eu, tempor magna. Integer nec ipsum dui. Quisque at diam est. Aliquam ut placerat ligula, eu venenatis turpis. Sed nec eros vel ante ornare eleifend. Suspendisse aliquam nulla consectetur tellus molestie efficitur.
</div>
</aside>
</div>
</div>
</div>
CSS
body{
font-family: arial;
font-size: 14px;
color: #333;
line-height: 1.5;
overflow-y: scroll;
margin:0;
padding: 0;
}
*, *::before, *::after {
box-sizing: border-box;
}
.container:after,
.cols-wrap:after,
.page-cols:after{
clear: both;
content: "";
display:table;
}
.container{
margin: 0 auto;
max-width: 1200px;
min-width: 300px;
padding:0 10px;
position: relative;
}
.page-cols{
background-color: #999;
}
.cols-wrap{
width: 100%;
position: relative;
background-color: #ccc; /*this can be #fff too to match body bg*/
box-shadow: 10px 10px 10px -10px #000;
right: 320px;
}
.cols-wrap .main-col{
float: left;
left: 320px;
position: relative;
width: 100%;
padding-right: 340px;
}
.cols-wrap .aside-col{
float: right;
position: relative;
width: 320px;
margin-right: -320px;
padding-left: 20px
}
I am trying to get my main content and menu divs to stretch to the top of the footer div. My HTML is:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
position: relative;
}
#header {
padding: 10px;
background: #3095C7;
}
#main {
padding-bottom: 80px;
bull
}
#content {
padding-left: 310px;
background: #FFEFC4;
}
#menu {
background: #67b5d1;
width: 300px;
position: absolute;
float: left;
}
#footer {
text-align: center;
padding: 30px 0;
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
background: #3095C7;
}
<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="menu">
menu here
</div>
<div id="content">
content here
</div>
</div>
<div id="footer">footer content</div>
</div>
I have set the main, content, and menu height to 100%, but that of course just is to the very bottom of the wrapper div, which is beyond footer. What I am trying for is for menu and content to stretch from the header all the way down to the top of footer, so it fills the whole page. I have played around with vh but isn't spot on constantly when re-sizing the window.
Are there any tricks that will make the divs fill all the blank space and not overlap the footer?
Very simple with flexbox (browser support is IE10+ and everything else that's remotely modern)
Set up #wrapper to be display: flex; flex-flow: column nowrap
Set up #main to be flex: 1 1 auto and display: flex so 1) that it grows to the necessary height and 2) so that it's children will also grow to the height of #main.
Set flex: 0 1 300px on #menu (and remove floats/position: absolute) and set #content to be flex: 1 1 auto.
EDIT
Forgot to remove position: absolute (and associated bottom/left rules) from the footer. I also added a ton of content (and modified the left menu to not shrink flex: 0 0 300px instead of flex: 0 1 300px so that a bunch of content doesn't collapse it into nothing-ness
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
display:flex;
flex-flow: column nowrap
}
#header {
padding: 10px;
background: #3095C7;
}
#main {
display: flex;
flex: 1 1 auto;
}
#content {
flex: 1 1 auto;
background: #FFEFC4;
}
#menu {
background: #67b5d1;
flex: 0 0 300px;
}
#footer {
text-align: center;
padding: 30px 0;
width: 100%;
height: 50px;
background: #3095C7;
}
<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="menu">
menu here
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu tristique ex, at rhoncus sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec non ipsum ut nulla volutpat gravida. Donec euismod nibh venenatis fermentum dignissim. Nulla sagittis tristique felis vitae fermentum. Phasellus at viverra sem. In scelerisque mi ac dolor convallis, vitae convallis felis condimentum. Donec porta leo nec semper luctus. In dignissim bibendum viverra. Maecenas molestie, dui eget finibus hendrerit, arcu turpis dapibus arcu, laoreet aliquam lectus justo a lorem. In et enim ac elit tincidunt imperdiet. Phasellus eget erat sed nulla placerat venenatis et in ligula. Mauris volutpat feugiat diam sit amet bibendum. Donec vulputate tristique augue vel pharetra. Mauris orci quam, pharetra lacinia commodo eu, tristique at est.
Morbi metus sapien, venenatis a pulvinar eget, accumsan et nisi. Phasellus vitae blandit augue. Proin quis mollis orci. Ut consequat tempor nulla id dignissim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce in euismod nibh, pharetra laoreet eros. Donec feugiat neque est, ac pharetra quam sollicitudin a.
Donec hendrerit ac magna at tincidunt. Pellentesque eget eros vel mauris porttitor aliquam ac vel tortor. Vestibulum vitae porttitor enim, eu scelerisque quam. Suspendisse tincidunt nisi non eros condimentum, quis faucibus arcu pellentesque. Morbi aliquet, est at pretium molestie, est arcu volutpat lectus, et condimentum leo risus sed velit. Maecenas at fermentum magna. Duis sit amet pretium ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, facilisis eu tellus vel, sagittis pretium metus. Aenean fermentum sem eu finibus dignissim. Fusce lacinia purus at libero ornare ultricies. Etiam pellentesque erat nisi, a ullamcorper arcu varius eu. Quisque lacinia bibendum ipsum vitae bibendum.
Maecenas non consequat augue, id euismod magna. Vestibulum ut maximus eros, ut efficitur neque. Aenean feugiat nunc et viverra pulvinar. Praesent vitae lobortis mi. Duis eu lorem a velit consequat fringilla at eu lacus. Ut mi mauris, cursus et lectus non, auctor iaculis eros. Sed sit amet efficitur arcu. Maecenas in enim quis massa vestibulum imperdiet ac quis dui. Curabitur malesuada, neque eu scelerisque sagittis, erat nisl condimentum sapien, vitae volutpat felis nisi ac lectus. Fusce iaculis mollis enim, vitae consectetur metus egestas sed. Proin lacus lorem, finibus ut tincidunt quis, tincidunt a urna. Donec fringilla risus augue, et bibendum diam cursus vitae. Aenean mattis sapien eget volutpat ornare.
</div>
</div>
<div id="footer">footer content</div>
</div>
I think your code is a bit messed.
If I understood correctly your question you have a header and footer with fixed height and you want the content of the web to fill the height of the (vertical) window.
When using height:100% remember all parents need to have same height 100% but then you may have a problem as height 100% plus the fixed height of footer and header will create a scroll bar.
you can use css calc to substract px's to 100% height. I calculate the pixels you need to subtract in your example and the height for your content shoudl be:
height:calc(100% - 110px);
AND the height of your main:
height:calc(100% - 20px);
The rest is your css's with many changes to achieve what I think you were looking for. corrent me if I am wrong: FIDDLE
(you can see I also used calc to set the width to your content since your menu also had fixed width)
Note: carefull with the use of this technique if you NOT using border-boxfor your containers as all the paddings you are using add width (or height) to your elements. I recomend you to get use to add
* {
box-sizing: border-box;
}
in your css sheets. Once you get use to your live will be easier (just my humble opinion, some may disagree)
Assuming your footer has a fixed height, you can automatically set the height of #menu and #content using position: absolute:
position: absolute;
top: 0;
bottom: 110px; /* #footer height */
Most of the time, absolutely positioned elements have auto values of height and width computed to fit the contents of the element. However, non-replaced absolutely positioned elements can be made to fill the available space by specifying (as other than auto) both top and bottom and leaving height unspecified (that is, auto). Likewise for left, right, and width.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/position#Notes
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
position: relative;
}
#header {
padding: 10px;
background: #3095C7;
}
#main {
position: absolute;
top: 20px;
bottom: 0;
width: 100%;
}
#content {
position: absolute;
left: 310px;
right: 0;
top: 0;
bottom: 50px;
background: #FFEFC4;
}
#menu {
background: #67b5d1;
top: 0;
bottom: 50px;
width: 300px;
position: absolute;
}
#footer {
text-align: center;
padding: 30px 0;
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
background: #3095C7;
}
<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="menu">
menu here
</div>
<div id="content">
content here
</div>
</div>
<div id="footer">footer content</div>
</div>
Add a specified height into your CSS, e.g. height: 100px and then set overflow to hidden.
So basically, just add:
height: 100px;
overflow: hidden;
to your menu and content.
so i'm confused as to why my footer section is hidden. I assume it is because the body is set to overflow: hidden, but it needs to be this way in order for the off-canvas menu to work. If I remove overflow: hidden on the body then the menu bar disappears when scrolling. I just don't understand why the footer section isn't showing since it is inside of the body element. Any ideas how to fix this problem?
Here is a JSFiddle:
https://jsfiddle.net/b18wmdzg/
Html
<body>
<div class="container">
<div class="menu-wrap">
<nav class="menu-top">
</nav>
<nav class="menu-side main-navigation" id="site- navigation">
Home
page 2
page 3
</nav>
</div>
<div class="menu-bar">
<button class="menu-button" id="open-button">menu</button>
<button class="nav-2">Contact</button>
<button class="nav-2">Case Study</button>
</div>
<div id="content" class="site-content content-wrap">
<div class="dummy-content">
<p>hoaubobaowbeobafohweofhwohfowuheofhowehfowhohfohwfohohohohohohohohoh</p>
</div>
</div>
<footer class="site-footer">
<p>dhooabobaweobofeobweh</p>
</footer>
</div>
`
CSS
html, body {
overflow: hidden;
width: 100%;
height: 100%;
background: #2a3032;
}
.container {
height: 100%;
}
.menu-wrap {
position: fixed;
font-weight: 700;
opacity: 0;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.main-navigation {
background: none !important;
width: 240px !important;
clear: both;
display: block;
float: left;
}
.menu-bar {
width: 100%;
height: 6rem;
}
.container > .content-wrap {
background: #f8f7ee;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.container, .content-wrap {
height: 100%;
width: 100%;
}
.dummy-content {
height: 1000px;
}
footer.site-footer {
height: 400px;
width: 100%;
background: black;
}
overflow: hidden means that anything beyond the bounds of the element is hidden; no scrolling. In this case, the html and body elements default to the dimensions of the window, and your footer is beyond those dimensions, so it is cut off.
My suggestion is that if you want your navigation bar to remain at the top of the screen, you give it a fixed position:
html, body {
background: #2a3032;
}
.menu-bar {
width: 100%;
height: 6rem;
position: fixed;
top: 0;
left: 0;
background: #2a3032;
z-index: 10;
}
.site-content {
background: #f8f7ee;
}
#content {
margin-top: 6rem;
}
.dummy-content {
height: 1000px;
}
footer.site-footer {
height: 400px;
width: 100%;
background: black;
color: #fff;
}
<body>
<div class="container">
<div class="menu-bar">
<button class="menu-button" id="open-button">Menu</button>
<button class="nav-2">Contact</button>
<button class="nav-2">Case Study</button>
</div>
<div id="content" class="site-content">
<div class="dummy-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec congue magna. Sed ullamcorper velit id dolor congue convallis. In massa est, gravida a eros vitae, ornare aliquet nunc. Mauris elementum enim ut dapibus scelerisque. Etiam luctus orci id quam congue finibus. Proin consequat dapibus porttitor. Etiam pretium consectetur nibh non porttitor. Donec in leo sit amet neque cursus sagittis nec vel est. Morbi metus libero, suscipit in fringilla nec, molestie ut diam. Sed rutrum magna vitae orci pellentesque, non feugiat nibh sollicitudin.
<p>Aliquam eget efficitur eros, eu egestas mauris. Morbi vel vehicula arcu. Integer viverra ipsum sed turpis laoreet dictum a vitae ex. Cras lectus libero, pellentesque quis nisi quis, tristique lobortis ante. Maecenas mattis ligula eget dui ultrices tristique. Sed in consectetur mauris. Fusce vulputate lacinia quam, sed ornare massa consequat in. Ut et turpis dui. Sed vitae diam vel sapien commodo mollis. Curabitur ante odio, tempor vel augue rhoncus, volutpat ultrices est. Curabitur nibh ipsum, dapibus et dignissim ut, faucibus eget nulla. Phasellus eget turpis rhoncus, pellentesque eros quis, iaculis quam. Nam laoreet felis sed nisi iaculis sagittis.
</div>
</div>
<footer class="site-footer">
<p>dhooabobaweobofeobweh</p>
</footer>
</div>
</body>
If you want to have another menu that opens on top of the first menu, then you can give it a larger z-index.
In general you want to avoid nested scroll bars; if something scrolls it should be the page as a whole, not individual elements.
the main problem is setting :
.content-wrap {
height: 100%;}
whenever you set height to 100% you need to think on what that means.. in your case it meant 100% of windowHeight, and since you had another div on top your footer this was pushed below the bottom ,
here's a working fiddle
This question already has answers here:
Fixed position but relative to container
(31 answers)
Closed 8 years ago.
I'm building a web page that will have a fixed header. Currently the fixed header is not staying in it's parent at width: 100% and it its hiding behind the content on the page. I understand position:fixed takes the element out the normal flow of things, but I'm not sure how to fix this. I'm looking for a fix that will be have well resizing to different screen sizes. Here's my jsfiddle http://jsfiddle.net/claireC/7hnbc/1/ and codes below
html:
<header>
<nav>
<p class="navLinks navFloat">link</p>
<a class="navLinks" href="#">link</a>
<p class="navLinks">link</p>
</nav>
</header>
<div class="content">
<p class="aboutMe">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget eros ut quam mollis dignissim. Nullam ultrices nisl vitae urna adipiscing vulputate. Sed ut ligula quam. Aenean lorem nunc, vulputate eget nisi ut, blandit feugiat dui. Aliquam tempor ornare felis at venenatis. Vivamus vel pulvinar turpis, vitae imperdiet nunc. Nulla purus leo, euismod eget velit eu, rutrum commodo sem. Ut eleifend sem sed purus pharetra lacinia. Donec id lacus sodales erat interdum pharetra non at purus. Proin dignissim est at leo volutpat venenatis. Phasellus pellentesque turpis vel velit blandit, non egestas purus hendrerit. Pellentesque eget massa at nisl lobortis tempor. Cras orci tellus, egestas a mauris sit amet, consectetur euismod lorem. Suspendisse faucibus odio quis leo fringilla, hendrerit hendrerit tortor luctus. Integer quis pulvinar lacus.
</p>
</div>
</div>
css:
html, body{
height: 100%;
}
body{
position: relative;
font-family: Helvetica;
}
.wrapper{
margin: 0 auto;
min-height: 100%;
width: 1280px;
background-color: red;
}
header{
position: fixed;
top: 0;
background-color: red;
width: 100%;
overflow: auto;
}
nav{
width: 376px;
margin: 0 auto;
background-color: #000;
overflow: auto;
}
.navLinks{
display: inline-block;
}
.content{
position: relative;
background-color: blue;
padding-bottom: 226px;
text-align: center;
}
.aboutMe{
font-size: 50px;
margin: 0 auto;
width: 676px;
}
a{
text-decoration: underline;
}
Could you maybe discribe the problem a bit better? Works fine for me, did you try it in multiple browsers?
May it be because you haven't set a z-index?
EDIT:
Adding a z-index to the Header worked for me:
header{
position: fixed;
top: 0;
background-color: red;
width: 100%;
overflow: auto;
z-index: 999;
}