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
Related
I have a table that is relatively large.
I want a horizontal scroll bar to be displayed when I move the mouse over it.
The current problem is that this scrollbar appears when the page loads, but disappears a second later.
I really want this scrollbar to appear when I move the mouse over it.
This is the actual code, the table is scrollable but the scrollbar is displaying when mouse is hover.
.mat-table {
position: relative;
overflow: auto;
width: 100%;
height: 100%;
}
.mat-row, .mat-header-row {
min-width: 1800px;
width: 100%;
}
Wrap your div or table inside another div, <div class="flow"></div> and in stylesheet,
.flow {
overflow: hidden;
}
.flow:hover {
overflow-x: scroll;
}
Why does this work when I wrap the element and not without being wrapped?
This is something, even I don't know but it has probably something to do with the declaration of width and height I guess.
Here's an example using this method:
.mat-table {
position: relative;
overflow: auto;
width: 100%;
height: 100%;
}
.mat-row,
.mat-header-row {
min-width: 1800px;
width: 100%;
}
.flow {
overflow: hidden;
}
.flow:hover {
overflow-x: scroll;
}
<!DOCTYPE html>
<html>
<head>
<style>
.flow {
overflow: hidden;
}
.flow:hover {
overflow-x: scroll;
}
.mat-table {
position: relative;
overflow: auto;
width: 100%;
height: 100%;
}
.mat-row,
.mat-header-row {
min-width: 1800px;
width: 100%;
}
</style>
</head>
<body>
<div class="flow">
<div class="mat-header-row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at nisi ut metus pharetra dapibus non non justo. Ut nunc erat, viverra et tellus sed, pellentesque vulputate arcu. Integer viverra eros at nisl lacinia, fermentum tempor dui finibus.</div>
<div class="mat-row">Sed placerat eget massa id suscipit. Fusce sed cursus mi. Praesent sodales enim at elementum feugiat. Pellentesque et bibendum massa. Aliquam ac erat a tellus semper sollicitudin. Aliquam congue sollicitudin est eget viverra.</div>
<div class="mat-row">Maecenas id sapien ac erat imperdiet efficitur eget auctor diam. Ut feugiat lacus dui, sit amet semper sapien consequat quis. Aliquam vitae mollis mauris. Sed a sem suscipit purus placerat semper vel non tortor. Proin pellentesque accumsan vestibulum. Sed id lobortis ipsum. Pellentesque facilisis volutpat libero nec interdum.</div>
</div>
</body>
</html>
My code is working properly.
After some research it seems to be caused by a Chrome bug.
To solve it enter in your search bar :
chrome://flags
And then set Overlay Scrollbars to disabled
You can set it back to auto after that
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
I need to create a website (two columns) where one column contains some text (vertical centered) and the other column contains a picture (sticky to bottom).
Both of them need to be responsive (so position: fixed is not an option for the image).
I tried to achieve this by using Bootstrap and the w3 responsive framework. But both of them seem unable to put a responsive image inside a column that is always stuck to the bottom.
Any tips on how I can achieve this layout while being responsive (Picture needs to resize etc)?
Here's a solution without using flex. It's completely responsive and can be scaled both horizontally and vertically.
body {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100vh;
overflow: hidden;
}
#column1 {
position: relative;
width: calc(50% - 4px);
height: calc(100% - 4px);
display: inline-block;
border: 2px solid black;
}
#column1 span {
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
padding: 10px;
}
#column2 {
position: relative;
top: -50%;
left: 50%;
width: calc(50% - 2px);
height: calc(50% - 4px);
display: inline-block;
border: 2px solid black;
border-left: none;
}
<div id="container">
<div id="column1">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum bibendum laoreet. Suspendisse eu mauris urna. Vestibulum vel blandit erat. Suspendisse egestas semper urna in convallis. Aliquam lobortis, leo nec pharetra semper, elit risus aliquet metus, non malesuada massa turpis tincidunt lectus. Fusce pellentesque metus ac lectus ultricies, et fermentum tellus fringilla.</span>
</div>
<footer id="column2"></footer>
</div>
Here's a quick example of how you can achieve it with flex.
/* Std */
body {
margin: 0;
width: 100%;
height: 100%;
}
/* Flex Classes */
.flex {
display: flex;
}
.flex--row {
flex-direction: row;
}
/* Column Classes */
.column {
position: relative;
min-height: 100vh;
}
.left-column {
flex: 0.7;
background: red;
}
.right-column {
flex: 0.3;
background: blue;
}
/* Picture */
#column-picture {
width: 100%;
height: inherit;
position: absolute;
bottom: 0;
}
<div class="flex flex--row">
<div class="column left-column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia auctor tincidunt. Sed a turpis et eros iaculis convallis quis in nisl. Donec fringilla auctor eros ut ultrices. Donec laoreet dui urna, ut pharetra neque molestie et. Ut sagittis diam a lacus euismod dignissim. Sed vulputate dui erat, at hendrerit ante commodo et. Sed gravida ex et est bibendum pretium. Aliquam a convallis dui. Maecenas magna velit, ultrices eu massa sit amet, dictum accumsan tellus. Maecenas eget placerat magna. Nullam mollis lacus tempor lorem tempor tincidunt. Aliquam erat volutpat.
</div>
<div class="column right-column">
<img id="column-picture" alt="Lion" src="https://cbs.umn.edu/sites/cbs.umn.edu/files/public/african_lion_king-wide.jpg"/>
</div>
</div>
Tell me what you think of this. #Mech
https://codepen.io/rickydam/pen/zdrmWX
HTML
<div class="left">
<div class="innerleft">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum bibendum laoreet. Suspendisse eu mauris urna. Vestibulum vel blandit erat. Suspendisse egestas semper urna in convallis. Aliquam lobortis, leo nec pharetra semper, elit risus aliquet metus, non malesuada massa turpis tincidunt lectus. Fusce pellentesque metus ac lectus ultricies, et fermentum tellus fringilla. Phasellus vel quam a sem elementum volutpat vel eget neque. Nam efficitur maximus risus, ac eleifend augue tempor rutrum. Fusce vehicula non lorem vitae blandit. Donec in scelerisque sem, quis congue velit.
</p>
</div>
</div><!--
--><div class="right">
<img src="http://www.uniwallpaper.com/static/images/Sunset-Village-Wallpaper_8I7ogbf.jpg">
</div>
CSS
.left {
width: 50%;
height: 100vh;
background-color: lightgray;
display: inline-block;
vertical-align: middle;
margin: auto;
}
.innerleft {
background-color: lightblue;
height: 100vh;
display: flex;
align-items: center;
}
.left p {
margin: 20px;
padding: 10px;
background-color: gray;
}
.right {
width: 50%;
height: 100vh;
background-color: slategray;
display: inline-block;
vertical-align: top;
position: relative;
}
.right img {
position: absolute;
bottom: 0;
max-width: 100%;
}
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
}
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;
}