How to wrap column content to the bottom on scroll? - html

How to wrap by lightgreen color #left "Scrolling Content" container to the bottom of the page when scrolling down? When there is no "Scrolling Content" in the left column it should be also stretched of 100% of page. I think that the right column under fixed container should also follow the same rules.
.wrapper,
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
/* flex-flow: column wrap; */
flex-direction: column;
/* align-items: stretch; */
height: 100%;
}
.top {
height: 60px;
}
.content {
flex-direction: row;
align-items: stretch;
display: flex;
flex: 1;
height: 100%;
}
nav {
height: 60px;
background: tomato;
position: fixed;
top: 0;
width: 100%;
}
#left {
display: flex;
background: lightgreen;
flex: 0 0 40%;
/* justify-content: center; */
flex-direction: column;
/* flex-wrap: wrap; */
}
#left > p {
flex: 1;
}
#right {
display: flex;
flex: 0 0 60%;
}
#fixed {
position: fixed;
background: aqua;
width: 60%;
/* height: 100%; */
}
<div class="wrapper">
<div class="top">
<nav role='navigation'>
</nav>
</div>
<div class="content">
<div id="left">
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
</div>
<div id="right">
<div id="fixed">
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
</div>
</div>
</div>
</div>


/* .wrapper, */ /* removed this */
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
/* flex-flow: column wrap; */
flex-direction: column;
/* align-items: stretch; */
min-height: 100%; /* changed here */
}
.top {
height: 60px;
}
.content {
flex-direction: row;
align-items: stretch;
display: flex;
flex: 1;
height: 100%;
}
nav {
height: 60px;
background: tomato;
position: fixed;
top: 0;
width: 100%;
}
#left {
display: flex;
background: lightgreen;
flex: 0 0 40%;
/* justify-content: center; */
flex-direction: column;
/* flex-wrap: wrap; */
}
#left > p {
flex: 1;
}
#right {
display: flex;
flex: 0 0 60%;
}
#fixed {
position: fixed;
background: aqua;
width: 60%;
/* height: 100%; */
}
<div class="wrapper">
<div class="top">
<nav role='navigation'>
</nav>
</div>
<div class="content">
<div id="left">
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
</div>
<div id="right">
<div id="fixed">
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
</div>
</div>
</div>
</div>


I've removed redundant blocks and styles. Here is minimal HTML and CSS:
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
display: flex;
flex: 1;
}
nav {
height: 60px;
background: tomato;
position: fixed;
top: 0;
width: 100%;
}
#left {
display: flex;
background: lightgreen;
flex: 0 0 40%;
flex-direction: column;
}
#right {
display: flex;
flex: 0 0 60%;
}
#fixed {
position: fixed;
background: aqua;
top: 60px;
width: 60%;
height: calc(100vh - 60px);
}
<nav role='navigation'>
</nav>
<div class="content">
<div id="left">
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
<p>Scrolling Content</p>
</div>
<div id="right">
<div id="fixed">
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
<p>This content should not scroll</p>
</div>
</div>
</div>

Related

Sticky navbar in css and html

I am trying to make the navbar stick at the top when i scroll down and i found this example on w3schools.
But when i add the margin at the top of the main content, the margin seems to get added to the navbar instead since it moves down 100px, can anyone help me out?
This is my code:
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Titillium Web', sans-serif;
}
nav {
display: flex;
justify-content: space-between;
padding: 10px;
box-shadow: 0 0 10px;
position: fixed;
width: 100%;
}
.pages-container p {
display: inline;
margin: 0 35px;
font-size: 20px;
}
.pages-container .last {
margin-right: 0;
}
nav .title {
font-size: 20px;
}
.main {
margin-top: 100px;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght#0,400;0,700;1,400&display=swap" rel="stylesheet">
<nav>
<p class="title">Portfolio Willem</p>
<div class="pages-container">
<p>Economie</p>
<p>Bedrijfseconomie</p>
<p>Wiskunde A</p>
<p class="last">Geschiedenis</p>
</div>
</nav>
<div class="main">
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
</div>
Thanks in advance!
I was expecting the main content to move down and not the navbar.

Add to <nav> top: 0; background: white;
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Titillium Web', sans-serif;
}
nav {
display: flex;
justify-content: space-between;
padding: 10px;
box-shadow: 0 0 10px;
position: fixed;
top: 0;
width: 100%;
background: white;
}
.pages-container p {
display: inline;
margin: 0 35px;
font-size: 20px;
}
.pages-container .last {
margin-right: 0;
}
nav .title {
font-size: 20px;
}
.main {
margin-top: 100px;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght#0,400;0,700;1,400&display=swap" rel="stylesheet">
<nav>
<p class="title">Portfolio Willem</p>
<div class="pages-container">
<p>Economie</p>
<p>Bedrijfseconomie</p>
<p>Wiskunde A</p>
<p class="last">Geschiedenis</p>
</div>
</nav>
<div class="main">
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
<p>test content</p>
</div>

Fixing size of div to make it scrollable without expanding the entire view

I have a screen in my React App that serves as an Overview where a list should display all created accounts. But I want a button fixed at the bottom and the account list scrollable in the area that is not taken by the header elements and the bottom button. So it should fill the entire screen but only the list should be scrollable.
I tried with flex-grow but it did not seem to work...Thanks for your help!
.list {
overflow: scroll
}
<div class="container">
<header>some Header</header>
<p>Some description</p>
<div class="list">
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
</div>
<button>Some button</button>
</div>

Use scroll instead of scrollable. Also a max-height for list:
* {
box-sizing: border-box;
}
body{
margin: 0;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 20px;
}
.list {
overflow-y: scroll;
max-height: 50vh;
}
button {
width: 100px;
}
<div class="container">
<header>
<p>some Header</p>
<p>Some description</p>
</header>
<div class="list">
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
<p>Some value</p>
</div>
<button>Some button</button>
</div>

Fixed horizontal scrollbar in child element

I have a wrapper that contains two children which each takes up 50% in width. They are equal in height which is higher than the parent. The parent handles this with overflow-y.
The right div could contain content that is wider than the divs width which is handled with overflow-x on the div. My problem is that I want the scrollbar to be fixed at the bottom of the parent div so it’s always visible.
Here is the html to illustrate the problem.
<div class="parent">
<div class="left">
<p class="left-content-row">Left content</p>
<p class="left-content-row">Left content</p>
<p class="left-content-row">Left content</p>
<p class="left-content-row">Left content</p>
<p class="left-content-row">Left content</p>
<p class="left-content-row">Left content</p>
<p class="left-content-row">Left content</p>
<p class="left-content-row">Left content</p>
<p class="left-content-row">Left content</p>
</div>
<div class="right">
<p class="right-content-row">Right content</p>
<p class="right-content-row">Right content</p>
<p class="right-content-row">Right content</p>
<p class="right-content-row">Right content</p>
<p class="right-content-row">Right content</p>
<p class="right-content-row">Right content</p>
<p class="right-content-row">Right content</p>
<p class="right-content-row">Right content</p>
<p class="right-content-row">Right content</p>
</div>
I have created a plunkr to show the setup and the problem
https://plnkr.co/edit/QkH0QT7bhUjKcntPjMtG?p=preview

Stop Scrolling of page when user comes to end of scrollable fixed element

The sidebar and main content is staying next to each other in the page.
sidebar is fixed with scroll auto
main-content is normal
see this pen http://codepen.io/shmdhussain/pen/QdXmQm
.sidebar{
background:black;
color:white;
position:fixed;
width:20%;
height:100%;
left:0;
overflow:auto;
}
.main{
background:silver;
color:black;
width:80%;
float:right;
}
.main p{
margin-bottom:50px;
}
<div class="cont">
<div class="main">
<p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p> <p>Main Content</p>
</div>
<div class="sidebar">
<p>sidebar content</p>
<p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p> <p>sidebar content</p>
</div>
</div>
Actual Result:
Here when the user scrolls the sidebar and comes to the end of the sidebar, main content content is scrolled when the user scrolls more, entire page is scrolled.
Expected Result:
Here when the user scrolls the sidebar and comes to the end of the sidebar, main content content should not be scrolled.
Is there any way to achieve this?. Thanks in advance for any help.

.sidebar {
background: black;
color: white;
position: fixed;
width: 20%;
height: 100%;
left: 0;
overflow: auto;
}
.main {
position: fixed;
width: 80%;
height: 100%;
left: 20%;
overflow: auto;
background: silver;
color: black;
}
.main p {
margin-bottom: 50px;
}
<div class="cont">
<div class="main">
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
<p>Main Content</p>
</div>
<div class="sidebar">
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
<p>sidebar content</p>
</div>
</div>
You need to separate both the divs in order to have their own scrolls.
This CSS should do the trick.
.main{
position:fixed;
width:80%;
height:100%;
left:20%;
overflow:auto;
background:silver;
color:black;
}
Codepen: http://codepen.io/hunzaboy/pen/KajoJG

Bootstrap - navbar-fixed-top inside another div

I have a div with width:500px and height:300px in the middle of a page.
I want inside this div to have my navbar-fixed-top.
Can you please correct my html/css to accomplish that?
Thanks
http://jsfiddle.net/MgcDU/7874/
<div class="container" style="width:500px;height:300px;border:solid black 1px;overflow:scroll">
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-inner" style="padding:10px">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" style="height:70px;" data-toggle="dropdown">
<div class="icon-some"></div>Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Dropdown link
</li>
<li>Dropdown link
</li>
</ul>
</div>
</div>
</nav>
</div>
<div id="wrapper">
<div id="content">
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
<p>some content</p>
</div>
<div id="padding-bottom"></div>
</div>
</div>

Based on what you said you want the nav bar with the class navbar-fixed-top to be inside the div, it seems simple enough.
All I did was add a position:relative to the css file for the .navbar class
.navbar{
position:relative;
}
Here is it working
http://jsfiddle.net/tKCm6/
Now if you wanted the nav to stay fixed in the div as you scroll down the page thats a different story.
Here is the code for that
.container{
position:absolute;
}
.navbar{
position:fixed;
width:500px;
}
and live
http://jsfiddle.net/vARTv/