My page doesn't scroll at all, if I change the window size, the content is just invisible if the page is too small. I've tried adding overflow: auto; and overflow: scroll: to many different tags, but this didn't work either.
Here's a snippet of the code, but see this fiddle for the full code
div.wrapper {
position: fixed;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
min-height: 100%;
}
header, ul {
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
div.contentwrapper {
text-align: center;
margin: 0 auto;
overflow: auto;
height: 100%;
}
div.left, div.right, div.mid {
display: inline-block;
vertical-align: top;
overflow: auto;
}
footer {
position: relative;
bottom: 0;
width: 100%;
}
<div class="wrapper">
<header>
<img>
<ul>my nav bar</ul>
</header>
<div class="contentwrapper">
<div class="left">
<div class="upperleft"></div>
<div class="lowerleft"></div>
</div>
<div class="mid"></div>
<div class="right"></div>
<footer></footer>
</div>
</div>
Remove position: fixed; from div.wrapper (and anything else you want to get scrolling).
Perhaps you meant position: absolute;
JSFiddle.
div.wrapper {
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
min-height: 100%;
}
header, ul {
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
div.contentwrapper {
text-align: center;
margin: 0 auto;
overflow: auto;
height: 100%;
}
div.left, div.right, div.mid {
display: inline-block;
vertical-align: top;
overflow: auto;
}
footer {
position: relative;
bottom: 0;
width: 100%;
}
<div class="wrapper">
<header>
<img>
<ul>my nav bar</ul>
</header>
<div class="contentwrapper">
<div class="left">
<div class="upperleft"></div>
<div class="lowerleft"></div>
</div>
<div class="mid"></div>
<div class="right"></div>
<footer></footer>
</div>
</div>
you have the wrapper set to position : fixed , you gotta change it. That will fix your problem.
div.wrapper {
position: relative;
}
Related
I have a container with the left side and right side. i have an image on the right side and it is overflowing hence the experience is bad.
I tried putting overflow: hidden but it is still going outside the box. I want the Right side to have a max-width of 50vw and anything that goes past it should be hidden.
What am I doing wrong?
.halfcontainer {
display: flex;
flex-direction: column;
height: 100vh;
align-items: center;
justify-content: center;
margin: 20px;
}
.righthalf{
overflow: hidden;
max-width:50vw;
}
.hero__image {
display: block;
position: absolute;
width: 70%;
top:10%;
right: -30%;
overflow: hidden;
}
<section >
<div class="halfcontainer">
<div class="lefthalf">
<h1>Hello world</h1>
</div>
<div class="righthalf">
<img class="hero__image" src="images/hero.webp" />
</div>
</div>
</section>
Just add Overflow hidden to parent div .halfcontainer
.halfcontainer {
display: flex;
flex-direction: column;
height: 100vh;
align-items: center;
justify-content: center;
margin: 20px;
position:relative;
overflow-x:hidden;
}
.righthalf{
overflow: hidden;
max-width:50vw;
}
.hero__image {
display: block;
position: absolute;
width: 70%;
top:10%;
right: -30%;
overflow: hidden;
}
<section >
<div class="halfcontainer">
<div class="lefthalf">
<h1>Hello world</h1>
</div>
<div class="righthalf">
<img class="hero__image" src="
https://picsum.photos/seed/picsum/200/300" />
</div>
</div>
</section>
I want the divs inside content_container to be stacked vertically below each other and not overlap. Please help.
My HTML code:
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
My CSS code:
#content_container{
float: left;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
}
#sub_nav{
position: fixed;
width: 100%;
}
#content{
width: 100%;
}
[1]: https://i.stack.imgur.com/28184.jpg
HTML
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
CSS
#content_container{
float: left;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
display: flex;
flex-direction: column;
}
#sub_nav{
position: -webkit-sticky;
position: sticky;
top:0;
width: 100%;
}
#content{
width: 100%;
}
Hope this helps !!
Also, refer to https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for full flexbox reference.
Your problem is the "position: fixed;" for the #sub_nav div.
Remove that and they should stack one on top of the other.
It will be much easily to use flex boxes:
#content_container {
display: flex;
height: 500px;
width: 100%;
}
#sub_nav {
background: red;
width: 200px;
}
#content {
flex: 1;
background: blue;
}
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
Try This...
#content_container{
width: 100%;
height: 100%;
display: flex;
}
#sub_nav{
width: 50%;
height: 200px;
background-color: red;
}
#content{
width: 50%;
background-color: blue;
height: 200px;
}
<body>
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
<body>
Much easier to do with flex boxes.
#content_container {
display: flex;
height: 500px;
width: 100%;
}
#sub_nav {
background: white;
width: 100px;
}
#content {
flex: 1;
background: green;
}
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
position: fixed takes the element out of the flow and make it fixed to the viewport. which leads the next element to overlap.
so you need to let fixed element sub_nav show on top. and content would show by giving it padding on top or move the top start point with relative
element{
position: relative;
top: 20px;
}
Example
#content_container {
float: left;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
}
#sub_nav {
background-color: yellow;
position: fixed;
width: 100%;
z-index: 1;
}
#content {
background-color: cyan;
width: 100%;
padding-top: 30px;
height: 100px;
}
<div id=content_container>
<div id=sub_nav>sub_nav
</div>
<div id=content>content
</div>
</div>
I have a CodePen Parallax example that works fine as is. But remove the display: none from line 9 in the CSS to show the header and footer and you get 2 scrollbars.
HTML:
<div class="outer">
<header><h1>Header</h1></header>
<div class="wrapper">
<div class="section parallax">
<h1>Heading</h1>
</div>
<div class="content">
<h1>Site Content</h1>
</div>
</div>
<footer><h1>Footer</h1></footer>
</div>
CSS:
body, html {
margin: 0;
padding:0;
}
/* remove the following to see the problem: */
header, footer {
display: none;
}
.wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 1px;
}
.section {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
color: white;
}
.parallax::after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(2);
background-size: 100%;
z-index: -1;
background-image: url('http://www.shainblumphoto.com/wp-
content/uploads/2016/02/dubai_1.jpg');
}
.content {
height: 200vh;
display: flex;
justify-content: center;
background: red;
}
Does anyone know what change to make to have one scrollbar that includes scrolling of the header and footer, without moving the header and footer to the wrapper, without JavaScript, and still maintain the parallax effect?
Please follow structure.
<div class="outer">
<div class="wrapper">
<header><h1>Header</h1></header>
<div class="section parallax">
<h1>Heading</h1>
</div>
<div class="content">
<h1>Site Content</h1>
</div>
<footer><h1>Footer</h1></footer>
</div>
</div>
Updated answer:
body,
html {
margin: 0;
padding: 0;
}
/* remove the following to see
the problem: */
.outer {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 1px;
}
.section {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
color: white;
}
.parallax::after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(2);
background-size: 100%;
z-index: -1;
background-image: url('https://via.placeholder.com/800');
}
.content {
height: 200vh;
display: flex;
justify-content: center;
background: red;
}
<div class="outer">
<header>
<h1>Header</h1>
</header>
<div class="wrapper">
<div class="section parallax">
<h1>Heading</h1>
</div>
<div class="content">
<h1>Site Content</h1>
</div>
</div>
<footer>
<h1>Footer</h1>
</footer>
</div>
My goal was to get the footer to stay at the bottom of the page and to go further down when more content is added. In doing so, a div element on my page which follows the footer has stopped half way when there isn't enough content.
My question is, how do you get the middle-stripdiv to stretch to the footer and have the goal above still achievable.
Here is a simplified JSFiddle to show the issue.
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #283343;
height: 50px;
}
#middle-strip {
padding-bottom: 100px;
background: #32cd32;
width: 500px;
margin: auto;
}
#content-area {
width: 400px;
height: 100%;
margin: auto;
}
#footer {
background: #283343;
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
}
<div id="container">
<div id="header">
THIS IS THE HEADER
</div>
<div id="middle-strip">
<div id="content-area">
THIS IS WHERE THE CONTENT WILL GO
</div>
</div>
<div id="footer">
THIS IS THE FOOTER
</div>
</div>
You can use flexbox to achieve this:
#container {
display: flex;
min-height: 100vh;
flex-direction: column;
}
#middle-strip {
flex: 1;
}
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
Current Situation
Using the following code I show a couple of divs floated to the left.
* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100%;
}
.header {
height: 80px;
position: fixed;
width: 100%;
background: green;
}
.inner-container {
position: absolute;
top: 80px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: auto;
white-space: nowrap;
}
.column {
height: 500px;
width: 150px;
background: red;
float: left;
margin: 5px;
}
<div class="container">
<div class="header">
</div>
<div class="inner-container">
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
</div>
</div>
Current result:
Problem
What I want is that the red boxes don't wrap within its container. I want both, a vertical and horizontal scroll bar if the space is not enough. For the vertical scrollbar it works. What am I missing?
JSFiddle: https://jsfiddle.net/brainchest/j6zh400v/
A fix I found was to change the .column from being a float: left to display: inline-block. This treats each column as a "word" (like a word in text) and thus the white-space: no-wrap; applies. Otherwise, the float: left changes the way the element gets positioned.
Edited Fiddle: https://jsfiddle.net/9bo4f5pv/
Use display: flex on the parent, then flex: 0 0 150px on the columns.
* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100%;
}
.header {
height: 80px;
position: fixed;
width: 100%;
background: green;
}
.inner-container {
position: absolute;
top: 80px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: auto;
display: flex;
}
.column {
height: 500px;
flex: 0 0 150px;
background: red;
margin: 5px;
}
<div class="container">
<div class="header">
</div>
<div class="inner-container">
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
</div>
</div>