I have tried to make a scrollable div without a defined height but without success. I want to make the scrollable-menu (left div) match the full view height and still be scrollable.
When I assign a height, the div is scrollable but doesn't match view height, and when I remove the height, the div isn't scrollable but full view height. Here is my current code.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<header>
<h1 >Header</h1>
</header>
<div class="wrapper">
<div class="scrollable-menu">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<div class="content">
<h1>Title</h1>
<p>content</p>
</div>
</div>
<script src="src/script.js"></script>
</body>
</html>
CSS
body {
height: 100vh;
display: flex;
flex-direction: column;
margin: 0;
}
header {
display: flex;
justify-content: center;
background-color: darkkhaki;
}
ul li {
padding: 10px;
}
.wrapper {
display: flex;
flex-direction: row;
flex: 1;
}
.scrollable-menu {
background-color: lightgray;
width: 240px;
overflow-y: scroll;
/* is scrollable but not full height when using defined height like: */
height: 300px;
}
.content {
padding: 15px;
background-color: lightgreen;
flex: 1;
}
https://jsfiddle.net/8ryj152e/73/
Whoever got the same problem, I finally got it working with those change:
Adding
ul {
height: 0px;
}
And removing the height of scrollable-menu
.scrollable-menu {
background-color: lightgray;
width: 240px;
overflow-y: scroll;
}
Related
So I'm trying to make a box/div with a max-height that contains 2 vertical scrollable lists of items that adjusts their heights depending on the amount of the items while still fitting in the parents' max-height. Example. And if both of them have overflowing items I want both lists to have 50% height. Example 2. Sorry if this sounds a little cryptic and hard to understand, having a hard time trying to describe it.
This is what I currently have.
HTML:
<div class="list-box">
<div class="list-1">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="list-2">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
</div>
SASS:
.list-box {
display: flex;
flex-direction: column;
max-height: calc(100vh - 15rem);
.list-1,
.list-2 {
height: auto;
overflow-y: auto;
}
}
Hope this will fix your issue.
HTML
<div class="parent-wrap">
<div class="child-wrap"></div>
<div class="child-wrap"></div>
<div>
CSS
.parent-wrap {
height: 100%;
border: 1px solid;
height:600px;
padding: 3px;
display: flex;
flex-direction: column;
}
.child-wrap {
border: 1px solid red;
overflow: auto;
}
.child-wrap:nth-child(1) {
max-height: 50%;
}
.child-wrap:nth-child(2) {
flex: 1;
}
I think you haven't need to flex.
/*CSS:*/
* {
box-sizing: border-box;
}
.list-box {
height: 500px;
border: solid green;
}
.list-1,
.list-2 {
overflow: auto;
max-height: 50%;
}
.list-1 {
border: solid red;
}
.list-2 {
border: solid blue;
}
<!-- HTML -->
<div class="list-box">
<div class="list-1">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="list-2">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
</div>
I would like to do this in CSS if this is possible with no javascript.
I have a list with x amount of items, it could anything. Here is a picture
The container is a % of the screen, so as i resize, the ul gets smaller, therefore the list items go on a new line.
What I would like to do is give the ul an text alignment of center if there is 1 line and text align of left if there is 2.
Is this possible with css only?
I cant do media queries as the number of items could be anything.
Are you looking for something like this?
body {
background: #11b5c3;
font-family: sans-serif;
padding: 50px;
}
h1 {
color: #fff;
text-align: center;
font-weight: 100;
}
/*
.container {
border-top: 1px solid #fff;
padding: 10px 0;
margin: 0 auto;
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
width:75%;
}
.container li {
background: #fefefe;
margin: 3px;
padding: 5px 10px;
border-radius: 3px;
font-size: 14px;
color: #999;
}*/
.container {
border-top: 1px solid #fff;
padding: 10px 0;
margin: 0 auto;
list-style: none;
/* display:flex; */
/*justify-content:center;*/
flex-wrap: wrap;
max-width: 500px;
text-align: justify;
}
.container li {
background: #fefefe;
;
margin: 3px 0;
padding: 5px 10px;
border-radius: 3px;
font-size: 14px;
color: #999;
display: inline-block;
font-size: 16px;
}
<h1>Tools</h1>
<ul class="container">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
I am piggy-backing off #Mobarak Ali but I think in this case you want to use grid and not flexbox. If you use flexbox with flexwrap: wrap; and justify-content: center; the items will always be centered. But the OP wants the items to be centered if they don't wrap but then justify on the left side on each subsequent row. Because grid is used for 2d layouts it can achieve this pretty easily.
Add or delete list items to see the effect. Here is a codepen if you prefer that.
https://codepen.io/zenRyoku/pen/rgWBEp
body {
background: teal;
font-family: sans-serif;
padding: 50px;
}
h1 {
color: #fff;
text-align: center;
font-weight: 100;
}
.container {
border-top: 1px solid #fff;
padding: 10px 0;
margin: 0 auto;
list-style: none;
display: grid;
justify-items: center;
grid-template-columns: repeat( auto-fit, minmax(50px, 1fr) );
grid-gap: 1rem;
max-width: 500px;
}
.container li {
width: 50px;
background: #fefefe;
padding: 5px 10px;
border-radius: 3px;
font-size: 14px;
color: #999;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<h1>Tools</h1>
<ul class="container">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</body>
</html>
I am building a complex webapp using React and I'm trying to figure out the smartest way to handle a complex positioning and layering situation.
I'm wondering if I need to rethink my entire structure or just tweak some css values.
The code below explains my issues:
aside {
position: absolute;
top: 0;
left: 0;
width: 20%;
height: 100vh;
background: blue;
color: white;
}
main {
position: absolute;
overflow: hidden;
background-image: url('https://i.ytimg.com/vi/6sta6Gkpgcw/maxresdefault.jpg');
background-size: cover;
top: 0;
left: 20%;
width: 80%;
height: 100vh
}
.page-wrap {
position: relative;
width: 100%;
height: 100vh;
overflow: auto;
}
.overlay {
position: fixed;
z-index: 1;
padding: 40px;
color: white;
font-size: 24px;
width: calc(80% - 80px);
height: 100vh;
background-color: rgba(0, 0, 0, .5);
}
ul {
position: relative;
z-index: 2;
list-style: none;
color: white;
font-size: 24px;
line-height: 2em;
padding-top: 100vh;
}
ul li {
display: inline-block;
width: 200px;
height: 200px;
text-align: center;
padding: 20px;
background: #ccc;
color: red;
margin: 50px;
}
button {
padding: 10px 30px;
background: green;
color: white;
font-size: 24px;
}
<aside>
SIDEBAR
</aside>
<main>
<section class="page-wrap">
<div class="overlay">
<button>
This needs to be clickable even though the list is on top
</button>
<div>
<h1>My issues here are:</h1>
<ol>
<li>the green button is covered (disabled) by the list</li>
<li>the overlay covers the scrollbar on its parent page-wrap section</li>
</ol>
</div>
</div>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>6</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>vew</li>
<li>Item</li>
</ul>
</section>
</main>
FIDDLE
My solution was to restructure the DOM so the body had the overflow. I had been trying to avoid this because it's a large webapp with a lot of components and pages, many of which suffered collateral damage, but ultimately, it solved my problem.
I need to stretch my vertical menu to the bottom to the footer all the time, even when there is no content. I posted this before, and the solution was working, but after some changes i was not able to fix it again. I m kind of lost, because this should be so easy and I'm stagnating with such an easy stuff.
Please can you also explain what does the solution do, so I will understand why it fixed the problem?
Here is how it looks now:
Here is the code:
#media only screen and(min-width: 1368px) {
.site-container {
height: 633px;
}
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -50px;
}
.page-wrap:after {
content: "";
display: block;
}
.footer, .page-wrap:after {
height: 50px;
}
.bordered {
border: 1px solid black
}
.footer {
position: relative;
width: 100%;
padding-left: inherit;
z-index: 10;
background-color: red;
height: 50px;
display: block;
}
.content {
position: relative;
float: right;
height: 100%;
display: block;
padding-top: 10px;
}
.header {
margin: inherit;
position: relative;
width: 100% ;
}
.menu-vertical {
position: relative;
background-color: #aaa;
float: left;
height: 100%;
}
li {
list-style-type: none;
padding: 0;
}
ul {
padding: 0;
}
menu {
padding: 0;
padding-right: 50px;
}
.site-container {
position: relative;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.site-container > .row:first-of-type {
height:100%;
}
.menu-horizontal ul {
padding: 0;
}
.menu-horizontal li {
list-style-type: none;
padding: 0;
padding-left: 50px;
margin: 0;
display: inline;
}
.menu-horizontal {
margin: inherit;
position: relative;
padding-top: 5px;
}
.page {
width: 90%;
padding-left: 10%;
min-height: 100%;
}
.page-wrap .row {
padding: 0;
margin: 0;
min-height: 100%;
}
Index.html
<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<meta charset="UTF-8">
<title>template</title>
</head>
<body>
<div class="page-wrap">
<div class="row">
<header class="col-sm-12 col-md-12 col-lg-12 bordered header"> <!-- Header -->
Header
</header> <!-- End of header -->
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 bordered menu-horizontal"> <!-- Horizontal menu -->
<menu class="menu-horizontal">
<ul>
<li>1nav item 1</li>
<li>1nav item 2</li>
<li>1nav item 3</li>
<li>1nav item 4</li>
<li>1nav item 5</li>
<li>1nav item 6</li>
</ul>
</menu>
</div><!-- End of horizontal menu -->
</div>
<div class="site-container">
<div class="col-sm-2 col-md-2 col-lg-2 bordered menu-vertical"> <!-- Vertical menu -->
<menu role="menu">
<ul>
<li>2nav item 1</li>
<li>2nav item 2</li>
<li>2nav item 3</li>
<li>2nav item 4</li>
<li>2nav item 5</li>
<li>2nav item 6</li>
</ul>
</menu>
</div> <!-- End of vertical menu -->
<div class="col-sm-10 col-md-10 col-lg-10 bordered content"> <!-- Content -->
</div> <!-- End of content -->
</div>
</div>
<footer class="col-sm-12 col-md-12 col-lg-12 bordered footer"> <!-- Footer -->
Footer
</footer> <!-- End of footer -->
</body>
</html>
Here is a link to my Codepen.
You must declare height: 100%; all the way up the DOM tree. This is something hard to accomplish in CSS. Essentially, you must account for 100% of the viewport height. In my simple example, the padding of the header and footer account for 5%, and the sidebar nav accounts for the remaining 95%.
Hope that helps.
Try setting min-height to 100% on vertical menu
I'm working on building a page with a 2 column layout, header, and footer. I'm using div's, html, and css.
The Problem I'm Experiencing is the left column that is created by div#sideBar extends over the footer when content is added.
The Solution I'm Looking For is I'd like the left column to 'push' the footer down and extend the length of the div#contentWrapper when more content is added to the div#sideBar.
I've looked through several tutorials, but I can't seem to figure it out. Can someone please direct me to a tutorial that will solve this problem or help me modify the code below so the page it creates will extend (push down footer) as content is added to the div#sideBar?
The ScreenShot below shows the result of the code below.
<style type="text/css">
#wrapper {
width: 900px;
margin: auto;
}
#header {
background-color: #0F0;
}
#contentWrapper {
background-color: #FF0;
}
#footer {
background-color: #00F;
}
#sideBar {
float: left;
width: 200px;
height: 100%;
color: #F00;
}
#content {
width: 700px;
margin-left: 200px;
background-color: #FFF;
}
p {
margin: 0px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
Home | Page One | Page Two </div>
<div id="contentWrapper">
<div id="sideBar">
<p>
<ul>
<li>Home</li>
<li>Page One</li>
<li> Page Two</li>
</ul>
</p>
<p>hgfds</p>
<p>kgjkfhghf</p>
<p>jkfhgjdffgfhj</p>
<p>ljkfhgjdf</p>
<p>;klgjhg</p>
<p>lkgjhfg</p>
<p>lgkjhfg</p>
<p> </p>
</div>
<div id="content">
<p>Content for id "content" Goes Here</p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="footer">
<p>CopyRight 2014</p>
<p>Home | Page One | Page Two</p>
</div>
</div>
</body>
</html>
#footer {
background-color: #00F;
clear:both;
}
You need to clear the float used in the sideBar, which you can do in the footer.
#sideBar {
float: left;
width: 200px;
height: 100%;
color: #F00;
}
Unless you also need to expand the background of in which case you need to add a tag inside the wrapper that clears the floats
</div> <!-- content div -->
<div style="clear:left"></div>
</div> <!-- wrapper div -->
<div id="footer">
Easiest way would be to use display:table; on a container that the sidebar and main content area both share and set the two child divs to display:table-cell;
HTML:
<div class="container">
<div class="sidebar">
<ul>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
<li>item 1</li>
</ul>
</div>
<div class="main">
main content main content main content main content main content main content main content main content main content main content main content main content main content main content main
</div>
</div>
CSS:
.container {
width:100%;
display:table;
}
.sidebar, .main {
width:50%;
display:table-cell;
}
.main {
background:#eee;
}
.sidebar {
background:#666;
}
http://jsfiddle.net/3gbfnpua/3/
You can solve this by adding this to your css:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Then add class="clearfix" to any element you want to extend.
There's a lot of information about Clearfix on StackOverflow (and elsewhere on the internet). Try this question, for example.
#wrapper {
width: 900px;
margin: auto;
}
#header {
background-color: #0F0;
}
#contentWrapper {
background-color: #FF0;
}
#footer {
background-color: #00F;
}
#sideBar {
float: left;
width: 200px;
height: 100%;
color: #F00;
}
#content {
width: 700px;
margin-left: 200px;
background-color: #FFF;
}
p {
margin: 0px;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
<div id="wrapper">
<div id="header">
Home | Page One | Page Two</div>
<div id="contentWrapper" class="clearfix">
<div id="sideBar">
<p>
<ul>
<li>Home</li>
<li>Page One</li>
<li>Page Two</li>
</ul>
</p>
<p>hgfds</p>
<p>kgjkfhghf</p>
<p>jkfhgjdffgfhj</p>
<p>ljkfhgjdf</p>
<p>;klgjhg</p>
<p>lkgjhfg</p>
<p>lgkjhfg</p>
<p> </p>
</div>
<div id="content">
<p>Content for id "content" Goes Here</p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="footer">
<p>CopyRight 2014</p>
<p>Home | Page One | Page Two</p>
</div>
</div>