I am taking a course in web development and I've gotten stuck, I know it has something to do with the containers and flexing but I cannot for the life of me figure it out, I've seen multiple examples and they are all similar to my HTML, CSS.
Here is my github with all, the necessary files (only index.html and styles.css have been edited so focus on those). Here is the github hosted page.
Edit : Snippet
body {
color: #515a69;
background-color: #b0b7c2;
font-size: 18px;
font-family: 'Roboto', sans-serif;
}
/* Header */
#header-nav {
background-color: #d3dceb;
border-radius: 0;
border: 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding-top: 10px;
padding-bottom: 10px;
height: 70px;
}
#header-nav .container { /* Fixes margins to match professors examples */
margin-left: 0px;
margin-right: 0px;
}
#nav-list {
background-color: #515a69;
text-align: center;
}
.navbar {
z-index: 100;
}
#nav-list a{
background-color: #515a69;
text-align: center;
padding-top: 10px;
padding-right: 10px;
padding-left: 0px;
}
#collapsable-nav {
border: 0;
}
li{
background-color: #515a69;
border: 2px black;
padding-bottom: 10px;
padding-top: 10px;
}
.navbar-brand h1 { /* Restaurant name */
color: #515a69;
font-size: 1.5em;
font-weight: bold;
margin-top: -5px;
}
.navbar-brand a:hover, .navbar-brand a:focus {
text-decoration: none;
}
.navbar-header button.navbar-toggle, .navbar-header .icon-bar {
border: 1px solid #61122f;
}
.navbar-header button.navbar-toggle {
clear: both;
margin-top: -45px;
}
/* Main Content */
#maincontent div{
background-color: #7e588d;
border: 2px solid black;
height: 1000px;
overflow: auto;
}
div .container {
width: 90%;
}
.row {
color: #d3dceb;
margin-left: 0;
margin-right: 0;
}
p {
padding-left: 10px;
padding-right: 10px;
overflow: auto;
}
#our-menu a, #our-menu a-hover{
text-style: none;
text-decoration: none;
color: black;
}
#sushi h3, #beef h3, #chicken h3{
font-weight: bold;
padding-bottom: 10px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!doctype html>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Food, LLC</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar static-top navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand pull-left">
<h1>Food, LLC</h1>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="collapsable-nav" class="collapse-in navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-rights">
<li class="visible-xs">
<br>Chicken
</li>
<li class="visible-xs">
<br>Beef
</li>
<li class="visible-xs">
<br>Sushi
</li>
</ul><!-- #nav-list -->
</div><!-- .collapse .navbar-collapse -->
</div>
</div> <!-- Navbar Header -->
</div> <!-- Container -->
</nav>
</header>
<section id="our-menu">
<h1 class="text-center">Our Menu</h1>
</section>
<div class="row">
<div id="maincontent" class="container">
<div id="chicken-container" class="col-xs-12 col-sm-6 col-md-4">
<section id="chicken">
<h3 class="text-center">Chicken</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac nunc vitae metus hendrerit convallis. Vestibulum nulla eros, molestie non feugiat ornare, rhoncus ac eros. Praesent maximus risus sed purus vestibulum porttitor. Nam risus ipsum, tristique et porta vitae, fermentum non elit. Vivamus sollicitudin sem sit amet turpis ornare, sed imperdiet magna pretium. Nullam eu ultricies orci, non aliquet nibh. Donec a auctor metus. Phasellus eu tellus tellus. Sed mi odio, pellentesque in velit in, tempor vestibulum massa. Sed nulla justo, interdum nec tincidunt nec, tincidunt non libero. Aliquam sapien arcu, blandit vel porta quis, porta vel ante. In sollicitudin tortor lobortis vestibulum blandit. Aenean velit neque, consequat eget mauris ac, consequat facilisis lectus. Sed pulvinar, orci sed commodo facilisis, erat diam facilisis magna, vitae luctus metus eros a magna. Fusce hendrerit vitae nisi facilisis viverra. Cras suscipit purus ut turpis tempor, non iaculis mauris imperdiet.
Nunc elementum lobortis lectus non dapibus. Sed augue nunc, semper vel ipsum nec, fermentum interdum metus. Proin et elementum nisi, nec fermentum velit. Aliquam congue efficitur diam id vestibulum. Aliquam ac tortor auctor, convallis ligula at, suscipit elit. Ut congue, turpis in elementum tincidunt, mauris odio imperdiet diam, vitae porta lectus lacus eu dolor. Vivamus tellus nunc, molestie quis iaculis nec, volutpat ut mi. Aenean mattis magna sit amet diam convallis, id consectetur risus placerat. Suspendisse et ex id dui porta vestibulum ac ut felis. Integer tristique, sapien a ultricies laoreet, nibh nisl sagittis augue, tincidunt faucibus libero dui vitae ante. Proin rutrum nulla sed ultricies fringilla. Fusce vel rutrum enim, suscipit porttitor nisl.
Sed pharetra egestas orci in rhoncus. Donec eros libero, euismod pretium varius sodales, pellentesque vel mi. Donec semper consectetur vulputate. In dapibus placerat est fermentum posuere. Donec mi felis, gravida in felis eu, sagittis consectetur nisi. Integer sollicitudin sagittis dui, eget ullamcorper erat euismod at. Proin tincidunt ullamcorper tortor, et vestibulum leo accumsan eget. Mauris porttitor, ante ut accumsan tincidunt, ex odio commodo arcu, sit amet lacinia ante risus ac mauris. Nunc blandit lorem cursus, euismod tellus eget, suscipit ligula.
Praesent imperdiet semper metus vel ultricies. Cras vel condimentum tellus. Vestibulum eget turpis nec nunc suscipit vestibulum ac vitae ligula. Curabitur bibendum varius rhoncus. Fusce mi ante, fringilla nec imperdiet non, feugiat bibendum dui. Donec eleifend, massa rhoncus luctus vehicula, felis ante dapibus dolor, nec imperdiet mi ipsum ut sem. Sed facilisis risus lectus, ut ultrices enim hendrerit id. Cras eget egestas erat. Duis feugiat at risus quis commodo. Fusce fermentum lacus at metus viverra, quis feugiat purus sagittis. Curabitur at sollicitudin felis. Duis venenatis leo ac felis bibendum porta.
Donec sodales varius dui eget pharetra. Vivamus ut ex porta, venenatis libero quis, pulvinar diam. Nunc quis dapibus velit, malesuada lacinia quam. Morbi in lacinia felis. Nullam euismod tellus diam, id condimentum nisi fringilla quis. In fringilla lectus quis laoreet fringilla. Praesent blandit, purus vel bibendum pellentesque, enim eros pellentesque quam, et ultrices eros erat ac mi.
</p>
<h1>Return to the Top</h1>
</div>
</section>
<div id="beef-container" class="col-xs-12 col-sm-6 col-md-4">
<section id="beef">
<h3 class="text-center">Beef</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac nunc vitae metus hendrerit convallis. Vestibulum nulla eros, molestie non feugiat ornare, rhoncus ac eros. Praesent maximus risus sed purus vestibulum porttitor. Nam risus ipsum, tristique et porta vitae, fermentum non elit. Vivamus sollicitudin sem sit amet turpis ornare, sed imperdiet magna pretium. Nullam eu ultricies orci, non aliquet nibh. Donec a auctor metus. Phasellus eu tellus tellus. Sed mi odio, pellentesque in velit in, tempor vestibulum massa. Sed nulla justo, interdum nec tincidunt nec, tincidunt non libero. Aliquam sapien arcu, blandit vel porta quis, porta vel ante. In sollicitudin tortor lobortis vestibulum blandit. Aenean velit neque, consequat eget mauris ac, consequat facilisis lectus. Sed pulvinar, orci sed commodo facilisis, erat diam facilisis magna, vitae luctus metus eros a magna. Fusce hendrerit vitae nisi facilisis viverra. Cras suscipit purus ut turpis tempor, non iaculis mauris imperdiet.
Nunc elementum lobortis lectus non dapibus. Sed augue nunc, semper vel ipsum nec, fermentum interdum metus. Proin et elementum nisi, nec fermentum velit. Aliquam congue efficitur diam id vestibulum. Aliquam ac tortor auctor, convallis ligula at, suscipit elit. Ut congue, turpis in elementum tincidunt, mauris odio imperdiet diam, vitae porta lectus lacus eu dolor. Vivamus tellus nunc, molestie quis iaculis nec, volutpat ut mi. Aenean mattis magna sit amet diam convallis, id consectetur risus placerat. Suspendisse et ex id dui porta vestibulum ac ut felis. Integer tristique, sapien a ultricies laoreet, nibh nisl sagittis augue, tincidunt faucibus libero dui vitae ante. Proin rutrum nulla sed ultricies fringilla. Fusce vel rutrum enim, suscipit porttitor nisl.
Sed pharetra egestas orci in rhoncus. Donec eros libero, euismod pretium varius sodales, pellentesque vel mi. Donec semper consectetur vulputate. In dapibus placerat est fermentum posuere. Donec mi felis, gravida in felis eu, sagittis consectetur nisi. Integer sollicitudin sagittis dui, eget ullamcorper erat euismod at. Proin tincidunt ullamcorper tortor, et vestibulum leo accumsan eget. Mauris porttitor, ante ut accumsan tincidunt, ex odio commodo arcu, sit amet lacinia ante risus ac mauris. Nunc blandit lorem cursus, euismod tellus eget, suscipit ligula.
Praesent imperdiet semper metus vel ultricies. Cras vel condimentum tellus. Vestibulum eget turpis nec nunc suscipit vestibulum ac vitae ligula. Curabitur bibendum varius rhoncus. Fusce mi ante, fringilla nec imperdiet non, feugiat bibendum dui. Donec eleifend, massa rhoncus luctus vehicula, felis ante dapibus dolor, nec imperdiet mi ipsum ut sem. Sed facilisis risus lectus, ut ultrices enim hendrerit id. Cras eget egestas erat. Duis feugiat at risus quis commodo. Fusce fermentum lacus at metus viverra, quis feugiat purus sagittis. Curabitur at sollicitudin felis. Duis venenatis leo ac felis bibendum porta.
Donec sodales varius dui eget pharetra. Vivamus ut ex porta, venenatis libero quis, pulvinar diam. Nunc quis dapibus velit, malesuada lacinia quam. Morbi in lacinia felis. Nullam euismod tellus diam, id condimentum nisi fringilla quis. In fringilla lectus quis laoreet fringilla. Praesent blandit, purus vel bibendum pellentesque, enim eros pellentesque quam, et ultrices eros erat ac mi.
</p>
<h1>Return to the Top</h1>
</div>
</section>
<div id="sushi-container" class="col-xs-12 col-sm-12 col-md-4">
<section id="sushi">
<h2 class="text-center">Sushi</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac nunc vitae metus hendrerit convallis. Vestibulum nulla eros, molestie non feugiat ornare, rhoncus ac eros. Praesent maximus risus sed purus vestibulum porttitor. Nam risus ipsum, tristique et porta vitae, fermentum non elit. Vivamus sollicitudin sem sit amet turpis ornare, sed imperdiet magna pretium. Nullam eu ultricies orci, non aliquet nibh. Donec a auctor metus. Phasellus eu tellus tellus. Sed mi odio, pellentesque in velit in, tempor vestibulum massa. Sed nulla justo, interdum nec tincidunt nec, tincidunt non libero. Aliquam sapien arcu, blandit vel porta quis, porta vel ante. In sollicitudin tortor lobortis vestibulum blandit. Aenean velit neque, consequat eget mauris ac, consequat facilisis lectus. Sed pulvinar, orci sed commodo facilisis, erat diam facilisis magna, vitae luctus metus eros a magna. Fusce hendrerit vitae nisi facilisis viverra. Cras suscipit purus ut turpis tempor, non iaculis mauris imperdiet.
Nunc elementum lobortis lectus non dapibus. Sed augue nunc, semper vel ipsum nec, fermentum interdum metus. Proin et elementum nisi, nec fermentum velit. Aliquam congue efficitur diam id vestibulum. Aliquam ac tortor auctor, convallis ligula at, suscipit elit. Ut congue, turpis in elementum tincidunt, mauris odio imperdiet diam, vitae porta lectus lacus eu dolor. Vivamus tellus nunc, molestie quis iaculis nec, volutpat ut mi. Aenean mattis magna sit amet diam convallis, id consectetur risus placerat. Suspendisse et ex id dui porta vestibulum ac ut felis. Integer tristique, sapien a ultricies laoreet, nibh nisl sagittis augue, tincidunt faucibus libero dui vitae ante. Proin rutrum nulla sed ultricies fringilla. Fusce vel rutrum enim, suscipit porttitor nisl.
Sed pharetra egestas orci in rhoncus. Donec eros libero, euismod pretium varius sodales, pellentesque vel mi. Donec semper consectetur vulputate. In dapibus placerat est fermentum posuere. Donec mi felis, gravida in felis eu, sagittis consectetur nisi. Integer sollicitudin sagittis dui, eget ullamcorper erat euismod at. Proin tincidunt ullamcorper tortor, et vestibulum leo accumsan eget. Mauris porttitor, ante ut accumsan tincidunt, ex odio commodo arcu, sit amet lacinia ante risus ac mauris. Nunc blandit lorem cursus, euismod tellus eget, suscipit ligula.
Praesent imperdiet semper metus vel ultricies. Cras vel condimentum tellus. Vestibulum eget turpis nec nunc suscipit vestibulum ac vitae ligula. Curabitur bibendum varius rhoncus. Fusce mi ante, fringilla nec imperdiet non, feugiat bibendum dui. Donec eleifend, massa rhoncus luctus vehicula, felis ante dapibus dolor, nec imperdiet mi ipsum ut sem. Sed facilisis risus lectus, ut ultrices enim hendrerit id. Cras eget egestas erat. Duis feugiat at risus quis commodo. Fusce fermentum lacus at metus viverra, quis feugiat purus sagittis. Curabitur at sollicitudin felis. Duis venenatis leo ac felis bibendum porta.
Donec sodales varius dui eget pharetra. Vivamus ut ex porta, venenatis libero quis, pulvinar diam. Nunc quis dapibus velit, malesuada lacinia quam. Morbi in lacinia felis. Nullam euismod tellus diam, id condimentum nisi fringilla quis. In fringilla lectus quis laoreet fringilla. Praesent blandit, purus vel bibendum pellentesque, enim eros pellentesque quam, et ultrices eros erat ac mi.
</p>
<h1>Return to the Top</h1>
</div>
</section>
</div><!-- Row -->
</div><!-- Main Content -->
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
The main content should be pushed down when the navbar is expanded, I also had to setup a z-index for the collapsible menu so it wouldn't be overlapped by the main-content (which is probably doing something funky to it too) so I know there is something wrong in my navbar / header, the body is working perfectly as intended.
I am using an older version of bootstrap because that is what the professor who is teaching my course is using, if you believe a newer version of bootstrap will work I can for sure change everything up, I've just spent the last 10 hours doing this, setting up the page took me 50 minutes so I'm kind of at the end of my rope, if this doesn't work I'm just going to restart from scratch.
Thank you in advance for your time!
I fixed my problem by removing the height: 70px; inside of my #header-nav ID styling, everything works perfectly now :)
Related
OVERVIEW
I am building a website to showcase my blockchain and cybersecurity projects I'd worked with. So far, I'd implemented two pages of my website using bootstrap v5.1.3. I'm no front-end developer, but still I wanted to build something of my own.
Currently, I'm writing the description of one of my projects, and later I will add some images into it.
PROBLEM
I'm currently facing the issue of an horizontal bar showing if I write too much paragraphs in the page and I don't know how to make it disappear.
I'm trying to solve this issue so that all the paragraphs are responsive and only appear within the viewport width of a screen, and don't overflow creating the horizontal bar.
Check the image below for a better explanation.
IMAGE
QUESTION
How can I solve this only using bootstrap v5.1.3?
WEBPAGE CODE
/* test.css */
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Hack, monospace !important;
background-color: #0f0f0f;
}
body {
display: flex!important;
}
.wrapper {
background-color: #0f0f0f;
}
.text-center.h1 {
color: #F4364C !important;
font-size: 4vw !important;
}
.h6 {
color: #F4364C !important;
font-size: 1.25vw !important;
opacity: 0.5 !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="Joshua">
<title>Project 1 | XXX XXX</title>
<!-- hack fonts -->
<link href='https://cdn.jsdelivr.net/npm/hack-font#3.3.0/build/web/hack.css' rel='stylesheet' >
<!-- stylesheet -->
<link href='test.css' rel='stylesheet'>
<!-- bootstrap-5.1.3 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- bootstrap-5.1.3 script bundle with popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="d-flex flex-column min-vh-100 min-vw-100 wrapper">
<!-- Project Title -->
<div class="container-fluid my-auto">
<p class="text-center h1"><span>Astronomy Star Registry</span></p>
</div>
<div class="container-fluid my-auto">
<p class="h6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non nibh sit amet eros ullamcorper tincidunt. Curabitur sed imperdiet erat. In facilisis urna magna, ut mollis est posuere nec. Duis non neque vel libero dignissim dictum. Nullam scelerisque, sem porttitor dignissim blandit, enim felis condimentum enim, non cursus felis ex vel felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc lectus odio, finibus nec porta non, varius pulvinar eros. Aenean eget vulputate lorem, sed mollis ipsum. In mollis iaculis sem, quis sodales metus sodales quis. In nec efficitur libero, quis pharetra turpis. Nunc a felis vestibulum lacus feugiat euismod. Integer id diam a arcu dictum imperdiet nec at libero. Aliquam lorem dui, faucibus non posuere vel, venenatis vel augue. Aenean lorem ex, eleifend ut dictum a, semper nec risus. Nunc varius erat tortor, vitae sagittis sem vehicula non.
</p>
<p class="h6">
Aliquam erat volutpat. Pellentesque sagittis, nisi ac tempor lobortis, lacus neque posuere libero, vel maximus nibh dui non massa. Nulla at lectus vestibulum, tristique nisi at, vulputate ex. Vestibulum sit amet pharetra tortor. Sed felis nulla, finibus ut ipsum eget, pretium mollis quam. Proin urna metus, cursus non turpis vel, elementum blandit nulla. Nulla eu accumsan ipsum. Donec sodales tellus a turpis dapibus tincidunt. Praesent luctus vestibulum magna, ac feugiat metus ullamcorper eu. Mauris non elementum nunc, sed sagittis risus. Cras sed elit laoreet, faucibus ligula quis, tempus quam. Donec posuere eget eros eu pulvinar. Vestibulum justo augue, feugiat elementum erat sit amet, tempor porttitor urna. Integer malesuada mauris et ultricies sollicitudin.
</p>
<p class="h6">
Cras hendrerit quis velit vel molestie. Proin ut velit metus. Sed semper et neque non rhoncus. Cras semper dui eget eros tempus, sed malesuada nisi dignissim. Aliquam ante dolor, ultricies quis varius at, pellentesque nec urna. Mauris sit amet commodo nulla, ac malesuada lacus. Proin bibendum quis quam vel volutpat. Ut pulvinar tincidunt vehicula.
</p>
<p class="h6">
Phasellus sit amet vulputate neque, id mattis velit. Vivamus porttitor tellus ac est dictum lacinia. Aenean tincidunt tempus fringilla. Sed aliquam nibh ut turpis condimentum, eget malesuada nibh iaculis. Ut tincidunt at nisl vel tristique. Nam quam nunc, lacinia eget augue dictum, aliquet aliquam lectus. Aenean eleifend quam nec est tempus imperdiet.
</p>
<p class="h6">
In nec leo at tellus bibendum blandit sodales at neque. Sed vel dolor in tellus lobortis imperdiet venenatis in lectus. Ut ex ex, bibendum in fringilla et, vestibulum id mauris. Nam eu lorem nisi. Donec vitae fermentum est. Quisque sodales imperdiet felis, viverra consectetur enim egestas a. Duis leo orci, malesuada nec dolor ac, efficitur consequat dui. Aliquam lobortis commodo viverra.
</p>
<p class="h6">
Nunc vulputate ultricies metus in molestie. Mauris ultrices metus feugiat augue mollis ultrices. Quisque ac mattis enim, sed suscipit orci. Fusce eu enim tempor, bibendum ligula quis, faucibus ligula. Aenean nec iaculis tortor, eu suscipit sem. Proin in elit at lectus euismod lacinia. Quisque ac auctor felis, eget ultrices orci. Curabitur accumsan, massa dictum pellentesque feugiat, mauris velit tincidunt mi, ut porta nisl nibh id nisi. Nam non facilisis arcu. Aliquam eros est, elementum a leo sit amet, porttitor euismod ligula. Maecenas tellus massa, molestie ut ultrices at, finibus ac mauris.
</p>
<p class="h6">
Aliquam congue faucibus libero. Aenean sed suscipit ipsum. Aenean varius eleifend metus in pulvinar. Ut dapibus condimentum vehicula. Sed dictum arcu nulla, eget semper turpis fermentum at. Nam congue pretium rutrum. Mauris sit amet mauris sagittis, pulvinar nunc et, posuere diam.
</p>
<p class="h6">
Nunc tortor elit, interdum eget lacinia sed, tincidunt quis ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et nunc eu nibh pulvinar eleifend. Pellentesque porttitor feugiat placerat. In at felis est. Etiam scelerisque velit pharetra, blandit erat non, mattis ex. Aenean congue tortor nec diam maximus, eget auctor nisi accumsan. Sed at dignissim sem, eu placerat tellus. Curabitur lobortis dui nec lorem gravida pellentesque. Duis sagittis, tortor sit amet dapibus finibus, nisi lacus maximus tellus, nec convallis orci velit non libero. Cras sodales, sem in sodales tincidunt, nisi magna facilisis felis, imperdiet elementum erat turpis a dui. Duis non felis pretium, viverra dui eget, condimentum erat. Nunc lobortis convallis felis, ac scelerisque sem cursus a. Ut in gravida tortor. Cras porttitor sapien sem. Aenean cursus erat et libero scelerisque placerat.
</p>
<p class="h6">
Suspendisse potenti. Sed varius ipsum sem, imperdiet vehicula orci pharetra sit amet. Nulla facilisi. Integer faucibus sed tellus quis cursus. Donec lacinia varius ipsum, vitae bibendum justo pharetra vel. Nunc facilisis a dolor sit amet maximus. In nec leo iaculis, pharetra tortor ac, imperdiet arcu. Duis non rhoncus enim, vehicula tincidunt orci. Ut in augue at ante sagittis efficitur ac eget tortor. Nunc eget felis ac quam tempor volutpat. Phasellus id volutpat tortor. Sed cursus eros at interdum convallis. Morbi ullamcorper felis eget massa porttitor pulvinar sed vitae purus. Ut iaculis ante eget ipsum congue, ut efficitur diam condimentum. Etiam lobortis dolor est, sed fringilla diam placerat eget.
</p>
<p class="h6">
Vivamus consectetur, nisi in dapibus vehicula, ipsum eros congue nunc, a posuere nisl mauris vitae sem. Sed interdum placerat commodo. Quisque id molestie sapien. Vestibulum vitae tempus ligula. Morbi eu molestie risus. Vivamus ac sapien tincidunt, hendrerit nibh ut, sagittis lacus. Maecenas pellentesque elementum libero non pretium. Proin in sodales massa. Praesent eu blandit libero. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
</div>
</div>
</body>
</html>
Please remove min-vw-100 class from your div
<div class="d-flex flex-column min-vh-100 wrapper">
Context
I'm making a website that allows to create csgo bind/config files, so I splited the page in half : on the left, inputs from user, on the right, the configuration result.
I have one button, at the end of the each panel, to compute inputs and to download the file, but I would like to keep them visible all time (currently, they are at the bottom of the page, i need to scroll to find them).
For one panel, we have :
As the title and the button have "known" position, is there a way to extend the lorem ipsum div, pushing the button to the bottom of the panel, without overflowing the screen ?
I don't want to use absolute attributes, in anticipation of an adaptation for smaller screens (at that time, the two panels will be located one below the other).
I have try some stuff with flex-grow, nothing convincing.
I don't have any defined height for the lorem ipsum div; I want to cover the maximum of the panel, without overflowing it.
Here is some simplified code :
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
#wrapper {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
}
.panel {
flex-grow: 1;
min-width: 200px;
max-width: 50%;
padding: 1em;
}
#lorem {
overflow-y: scroll;
}
/* add colors :) */
body {
background-color: lightgreen;
}
#left {
background-color: red;
}
#right {
background-color: purple;
}
#lorem {
background: yellow;
}
#wrapper {
background-color: darkblue;
}
textarea {
resize: none;
}
h2 {
background-color: green;
}
input[type=button] {
border: 1px solid black;
background-color: blue;
}
<h1>Test</h1>
<div id="wrapper">
<div class="panel" id="left">
<div id="title">
<h2>Plic</h2>
</div>
<div id="lorem">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra ante sit amet velit rutrum eleifend. Integer efficitur convallis dui, in aliquet augue pellentesque ut. Aenean ut lobortis nibh. Nullam et laoreet arcu, sed consectetur lectus.
Phasellus ut nunc orci. Fusce mauris neque, ullamcorper at auctor vel, mollis vitae dolor. Mauris eget eleifend dui. Donec ut vestibulum ex. Nullam laoreet mi ut augue posuere pellentesque. Curabitur aliquet rutrum leo iaculis aliquet. Donec convallis
ante nunc, nec dictum ex fringilla sit amet.</p>
<p>Nam vel lacus non leo auctor ornare. Integer sit amet lectus in elit tristique eleifend ut a libero. Nam eu mauris in sapien semper venenatis. Integer malesuada fringilla sapien vel blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Nulla pretium sem quis nulla efficitur fermentum. Vestibulum leo nisi, imperdiet ut venenatis sed, consectetur cursus purus. Morbi ac ipsum aliquet, tempor enim bibendum, cursus mi. Phasellus eget semper augue, ut viverra tellus. Nulla lacus nisi,
congue imperdiet imperdiet sed, sollicitudin eu ex. Ut non dapibus elit. Donec at mollis ante. In aliquet pulvinar sollicitudin. Duis ac orci lobortis, pellentesque lacus in, feugiat urna. Suspendisse consectetur, risus ac elementum condimentum,
velit diam convallis ex, id ornare leo arcu at sapien.</p>
<p>Donec bibendum elit id orci rutrum, at eleifend urna porttitor. Vivamus odio quam, gravida at euismod in, vestibulum et dui. Morbi egestas urna eu erat hendrerit, in porttitor libero pharetra. Integer justo mauris, pulvinar tincidunt turpis a, tristique
ullamcorper nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin mollis tincidunt nunc eget tempor. Mauris bibendum pretium quam id pretium.</p>
<p>Phasellus quis nisi vehicula, viverra lacus non, porttitor dui. Suspendisse fringilla ullamcorper finibus. Praesent nec auctor elit. Nulla sit amet risus egestas, lacinia orci feugiat, imperdiet metus. Morbi purus metus, egestas eu massa in, aliquet
ullamcorper lectus. Praesent condimentum vehicula condimentum. Morbi nec neque a massa egestas tempus. Donec a cursus dui. Nullam scelerisque ultricies odio a dictum. Proin at ullamcorper justo, non auctor justo. Morbi id nunc id augue pulvinar
porttitor. Vestibulum congue magna eu odio condimentum rutrum. Pellentesque non pretium nibh.</p>
<p>Nunc ante leo, dapibus sit amet felis id, mattis auctor nisi. Praesent nec lacus posuere, commodo orci in, varius purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus in euismod nibh, nec congue purus. Aenean euismod laoreet
eros, et iaculis mi pharetra vitae. Curabitur eget massa non nibh consectetur pellentesque. In varius pharetra urna, ac tristique sapien lobortis vel.</p>
<p>Quisque eu velit mauris. Nunc sit amet placerat tellus. Praesent in fermentum orci. Sed pulvinar facilisis ornare. Vestibulum et metus eget libero tristique vulputate vitae vitae justo. Duis sit amet malesuada dolor. Etiam semper purus id turpis
ultrices, eu facilisis purus varius. Vivamus interdum elit ligula, eget condimentum purus tincidunt ac. Nullam at mattis arcu. Nunc vitae mi consequat, hendrerit urna et, gravida nulla. Ut ac purus blandit, volutpat leo non, facilisis lorem. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi dignissim porttitor sem et auctor. Praesent rutrum dignissim orci sit amet euismod.</p>
<p>Pellentesque hendrerit, arcu a iaculis semper, nisi libero porta turpis, et suscipit velit ipsum eu eros. Integer ex elit, pretium vel sapien eget, pulvinar sagittis tellus. Etiam non finibus ante, vitae viverra sem. Nulla in purus in lectus varius
pulvinar quis non turpis. Suspendisse sit amet arcu orci. Aliquam erat volutpat. Cras tincidunt enim vitae aliquam commodo. Curabitur non justo viverra, porttitor lorem sed, viverra diam.</p>
<p>Etiam et lobortis quam. Etiam accumsan pharetra lorem, nec sagittis leo vestibulum nec. Aenean pulvinar nisl ac sapien ultricies, eget lacinia neque aliquet. Fusce egestas libero id nisl rutrum, eget egestas turpis interdum. Etiam consectetur convallis
ex. Pellentesque mollis tortor vel dapibus tincidunt. Phasellus varius, nibh non consequat rhoncus, nisi est mollis quam, sed lacinia risus nisl sit amet arcu. Donec id tellus eu justo rutrum dictum. Integer tristique risus ut odio rutrum, quis
dignissim est varius. Cras a tortor semper, accumsan urna sed, mattis dolor. Ut eget placerat purus. Aliquam in sollicitudin tellus. Vestibulum a semper quam, ut hendrerit enim.</p>
<p>Sed et erat consequat, ultrices est quis, sollicitudin lectus. Sed eu semper sapien. Sed suscipit bibendum lacus in semper. Duis mi tellus, gravida a risus id, bibendum tincidunt lectus. Nam consectetur iaculis tempus. Phasellus id consequat felis.
Aenean at ipsum molestie, ornare dui in, mollis turpis. Suspendisse sagittis in sapien ac consequat.</p>
</div>
<div id="button">
<input type="button" value="Press Me">
</div>
</div>
<div class="panel" id="right">
<div>
<h2>Ploc</h2>
</div>
<div>
<textarea></textarea>
</div>
<div>
<input type="button" value="Press Me">
</div>
</div>
</div>
Make each of you panel elements a column flexbox with height: 100% (also consider border-box to including padding in height).
Now just add min-height: 0 to wrapper element - see demo below:
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
#wrapper {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
min-height: 0; /* added */
}
.panel {
flex-grow: 1;
min-width: 200px;
max-width: 50%;
padding: 1em;
display: flex; /* added */
height: 100%; /* added */
flex-direction: column; /* added */
box-sizing: border-box; /* added */
}
#lorem {
overflow-y: scroll;
}
/* add colors :) */
body {
background-color: lightgreen;
}
#left {
background-color: red;
}
#right {
background-color: purple;
}
#lorem {
background: yellow;
}
#wrapper {
background-color: darkblue;
}
textarea {
resize: none;
}
h2 {
background-color: green;
}
input[type=button] {
border: 1px solid black;
background-color: blue;
}
<h1>Test</h1>
<div id="wrapper">
<div class="panel" id="left">
<div id="title">
<h2>Plic</h2>
</div>
<div id="lorem">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra ante sit amet velit rutrum eleifend. Integer efficitur convallis dui, in aliquet augue pellentesque ut. Aenean ut lobortis nibh. Nullam et laoreet arcu, sed consectetur lectus.
Phasellus ut nunc orci. Fusce mauris neque, ullamcorper at auctor vel, mollis vitae dolor. Mauris eget eleifend dui. Donec ut vestibulum ex. Nullam laoreet mi ut augue posuere pellentesque. Curabitur aliquet rutrum leo iaculis aliquet. Donec convallis
ante nunc, nec dictum ex fringilla sit amet.</p>
<p>Nam vel lacus non leo auctor ornare. Integer sit amet lectus in elit tristique eleifend ut a libero. Nam eu mauris in sapien semper venenatis. Integer malesuada fringilla sapien vel blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Nulla pretium sem quis nulla efficitur fermentum. Vestibulum leo nisi, imperdiet ut venenatis sed, consectetur cursus purus. Morbi ac ipsum aliquet, tempor enim bibendum, cursus mi. Phasellus eget semper augue, ut viverra tellus. Nulla lacus nisi,
congue imperdiet imperdiet sed, sollicitudin eu ex. Ut non dapibus elit. Donec at mollis ante. In aliquet pulvinar sollicitudin. Duis ac orci lobortis, pellentesque lacus in, feugiat urna. Suspendisse consectetur, risus ac elementum condimentum,
velit diam convallis ex, id ornare leo arcu at sapien.</p>
<p>Donec bibendum elit id orci rutrum, at eleifend urna porttitor. Vivamus odio quam, gravida at euismod in, vestibulum et dui. Morbi egestas urna eu erat hendrerit, in porttitor libero pharetra. Integer justo mauris, pulvinar tincidunt turpis a, tristique
ullamcorper nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin mollis tincidunt nunc eget tempor. Mauris bibendum pretium quam id pretium.</p>
<p>Phasellus quis nisi vehicula, viverra lacus non, porttitor dui. Suspendisse fringilla ullamcorper finibus. Praesent nec auctor elit. Nulla sit amet risus egestas, lacinia orci feugiat, imperdiet metus. Morbi purus metus, egestas eu massa in, aliquet
ullamcorper lectus. Praesent condimentum vehicula condimentum. Morbi nec neque a massa egestas tempus. Donec a cursus dui. Nullam scelerisque ultricies odio a dictum. Proin at ullamcorper justo, non auctor justo. Morbi id nunc id augue pulvinar
porttitor. Vestibulum congue magna eu odio condimentum rutrum. Pellentesque non pretium nibh.</p>
<p>Nunc ante leo, dapibus sit amet felis id, mattis auctor nisi. Praesent nec lacus posuere, commodo orci in, varius purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus in euismod nibh, nec congue purus. Aenean euismod laoreet
eros, et iaculis mi pharetra vitae. Curabitur eget massa non nibh consectetur pellentesque. In varius pharetra urna, ac tristique sapien lobortis vel.</p>
<p>Quisque eu velit mauris. Nunc sit amet placerat tellus. Praesent in fermentum orci. Sed pulvinar facilisis ornare. Vestibulum et metus eget libero tristique vulputate vitae vitae justo. Duis sit amet malesuada dolor. Etiam semper purus id turpis
ultrices, eu facilisis purus varius. Vivamus interdum elit ligula, eget condimentum purus tincidunt ac. Nullam at mattis arcu. Nunc vitae mi consequat, hendrerit urna et, gravida nulla. Ut ac purus blandit, volutpat leo non, facilisis lorem. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi dignissim porttitor sem et auctor. Praesent rutrum dignissim orci sit amet euismod.</p>
<p>Pellentesque hendrerit, arcu a iaculis semper, nisi libero porta turpis, et suscipit velit ipsum eu eros. Integer ex elit, pretium vel sapien eget, pulvinar sagittis tellus. Etiam non finibus ante, vitae viverra sem. Nulla in purus in lectus varius
pulvinar quis non turpis. Suspendisse sit amet arcu orci. Aliquam erat volutpat. Cras tincidunt enim vitae aliquam commodo. Curabitur non justo viverra, porttitor lorem sed, viverra diam.</p>
<p>Etiam et lobortis quam. Etiam accumsan pharetra lorem, nec sagittis leo vestibulum nec. Aenean pulvinar nisl ac sapien ultricies, eget lacinia neque aliquet. Fusce egestas libero id nisl rutrum, eget egestas turpis interdum. Etiam consectetur convallis
ex. Pellentesque mollis tortor vel dapibus tincidunt. Phasellus varius, nibh non consequat rhoncus, nisi est mollis quam, sed lacinia risus nisl sit amet arcu. Donec id tellus eu justo rutrum dictum. Integer tristique risus ut odio rutrum, quis
dignissim est varius. Cras a tortor semper, accumsan urna sed, mattis dolor. Ut eget placerat purus. Aliquam in sollicitudin tellus. Vestibulum a semper quam, ut hendrerit enim.</p>
<p>Sed et erat consequat, ultrices est quis, sollicitudin lectus. Sed eu semper sapien. Sed suscipit bibendum lacus in semper. Duis mi tellus, gravida a risus id, bibendum tincidunt lectus. Nam consectetur iaculis tempus. Phasellus id consequat felis.
Aenean at ipsum molestie, ornare dui in, mollis turpis. Suspendisse sagittis in sapien ac consequat.</p>
</div>
<div id="button">
<input type="button" value="Press Me">
</div>
</div>
<div class="panel" id="right">
<div>
<h2>Ploc</h2>
</div>
<div>
<textarea></textarea>
</div>
<div>
<input type="button" value="Press Me">
</div>
</div>
</div>
PS: Adding min-height: 0 is to override the default min-height: auto for flex items in column direction - you can see some examples of this:
Flexbox affects overflow-wrap behavior
Flexbox resize and scrollable overflow
Why don't flex items shrink past content size?
Added the following CSS to your lorem id:
#lorem {
height: 80%;
overflow-y: auto;
}
Also to your panel: max-height: 100%;
Key part here is overflow-y: scroll. This works as long as you have a height defined. Since you want the content of your lorem to be relative to your panel, you can use a % height, in this case 80% seems to fit nicely between your title and button.
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
#lorem {
height: 80%;
overflow-y: scroll;
}
#wrapper {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
}
.panel {
flex-grow: 1;
max-height: 100%;
min-width: 200px;
max-width: 50%;
padding: 1em;
}
/* add colors :) */
body {
background-color: lightgreen;
}
#left {
background-color: red;
}
#right {
background-color: purple;
}
#lorem {
background: yellow;
}
#wrapper {
background-color: darkblue;
}
textarea {
resize: none;
}
h2 {
background-color: green;
}
input[type=button] {
border: 1px solid black;
background-color: blue;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Test</h1>
<div id="wrapper">
<div class="panel" id="left">
<div id="title">
<h2>Plic</h2>
</div>
<div id="lorem">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra ante sit amet velit rutrum eleifend. Integer efficitur convallis dui, in aliquet augue pellentesque ut. Aenean ut lobortis nibh. Nullam et laoreet arcu, sed consectetur lectus. Phasellus ut nunc orci. Fusce mauris neque, ullamcorper at auctor vel, mollis vitae dolor. Mauris eget eleifend dui. Donec ut vestibulum ex. Nullam laoreet mi ut augue posuere pellentesque. Curabitur aliquet rutrum leo iaculis aliquet. Donec convallis ante nunc, nec dictum ex fringilla sit amet.</p>
<p>Nam vel lacus non leo auctor ornare. Integer sit amet lectus in elit tristique eleifend ut a libero. Nam eu mauris in sapien semper venenatis. Integer malesuada fringilla sapien vel blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla pretium sem quis nulla efficitur fermentum. Vestibulum leo nisi, imperdiet ut venenatis sed, consectetur cursus purus. Morbi ac ipsum aliquet, tempor enim bibendum, cursus mi. Phasellus eget semper augue, ut viverra tellus. Nulla lacus nisi, congue imperdiet imperdiet sed, sollicitudin eu ex. Ut non dapibus elit. Donec at mollis ante. In aliquet pulvinar sollicitudin. Duis ac orci lobortis, pellentesque lacus in, feugiat urna. Suspendisse consectetur, risus ac elementum condimentum, velit diam convallis ex, id ornare leo arcu at sapien.</p>
<p>Donec bibendum elit id orci rutrum, at eleifend urna porttitor. Vivamus odio quam, gravida at euismod in, vestibulum et dui. Morbi egestas urna eu erat hendrerit, in porttitor libero pharetra. Integer justo mauris, pulvinar tincidunt turpis a, tristique ullamcorper nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin mollis tincidunt nunc eget tempor. Mauris bibendum pretium quam id pretium.</p>
<p>Phasellus quis nisi vehicula, viverra lacus non, porttitor dui. Suspendisse fringilla ullamcorper finibus. Praesent nec auctor elit. Nulla sit amet risus egestas, lacinia orci feugiat, imperdiet metus. Morbi purus metus, egestas eu massa in, aliquet ullamcorper lectus. Praesent condimentum vehicula condimentum. Morbi nec neque a massa egestas tempus. Donec a cursus dui. Nullam scelerisque ultricies odio a dictum. Proin at ullamcorper justo, non auctor justo. Morbi id nunc id augue pulvinar porttitor. Vestibulum congue magna eu odio condimentum rutrum. Pellentesque non pretium nibh.</p>
<p>Nunc ante leo, dapibus sit amet felis id, mattis auctor nisi. Praesent nec lacus posuere, commodo orci in, varius purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus in euismod nibh, nec congue purus. Aenean euismod laoreet eros, et iaculis mi pharetra vitae. Curabitur eget massa non nibh consectetur pellentesque. In varius pharetra urna, ac tristique sapien lobortis vel.</p>
<p>Quisque eu velit mauris. Nunc sit amet placerat tellus. Praesent in fermentum orci. Sed pulvinar facilisis ornare. Vestibulum et metus eget libero tristique vulputate vitae vitae justo. Duis sit amet malesuada dolor. Etiam semper purus id turpis ultrices, eu facilisis purus varius. Vivamus interdum elit ligula, eget condimentum purus tincidunt ac. Nullam at mattis arcu. Nunc vitae mi consequat, hendrerit urna et, gravida nulla. Ut ac purus blandit, volutpat leo non, facilisis lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi dignissim porttitor sem et auctor. Praesent rutrum dignissim orci sit amet euismod.</p>
<p>Pellentesque hendrerit, arcu a iaculis semper, nisi libero porta turpis, et suscipit velit ipsum eu eros. Integer ex elit, pretium vel sapien eget, pulvinar sagittis tellus. Etiam non finibus ante, vitae viverra sem. Nulla in purus in lectus varius pulvinar quis non turpis. Suspendisse sit amet arcu orci. Aliquam erat volutpat. Cras tincidunt enim vitae aliquam commodo. Curabitur non justo viverra, porttitor lorem sed, viverra diam.</p>
<p>Etiam et lobortis quam. Etiam accumsan pharetra lorem, nec sagittis leo vestibulum nec. Aenean pulvinar nisl ac sapien ultricies, eget lacinia neque aliquet. Fusce egestas libero id nisl rutrum, eget egestas turpis interdum. Etiam consectetur convallis ex. Pellentesque mollis tortor vel dapibus tincidunt. Phasellus varius, nibh non consequat rhoncus, nisi est mollis quam, sed lacinia risus nisl sit amet arcu. Donec id tellus eu justo rutrum dictum. Integer tristique risus ut odio rutrum, quis dignissim est varius. Cras a tortor semper, accumsan urna sed, mattis dolor. Ut eget placerat purus. Aliquam in sollicitudin tellus. Vestibulum a semper quam, ut hendrerit enim.</p>
<p>Sed et erat consequat, ultrices est quis, sollicitudin lectus. Sed eu semper sapien. Sed suscipit bibendum lacus in semper. Duis mi tellus, gravida a risus id, bibendum tincidunt lectus. Nam consectetur iaculis tempus. Phasellus id consequat felis. Aenean at ipsum molestie, ornare dui in, mollis turpis. Suspendisse sagittis in sapien ac consequat.</p>
</div>
<div id="button">
<input type="button" value="Press Me">
</div>
</div>
<div class="panel" id="right">
<div>
<h2>Ploc</h2>
</div>
<div>
<textarea></textarea>
</div>
<div>
<input type="button" value="Press Me">
</div>
</div>
</div>
</body>
</html>
When using flexbox, it's important that you specify exactly what you want for each element. You've said you don't want a height on #lorem but you have to specify a height somewhere in order to get the results you want, I specified it with h1 and #wrapper. I believe this is the result you're looking for, take a look at the fiddle.
body {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
h1 {
height: 20%;
}
#lorem {
overflow-y: scroll;
}
#wrapper {
height: 80%;
display: flex;
flex-direction: row;
}
.panel {
padding: 1em;
width: 50%;
display: flex;
flex-direction: column;
}
You can make use of jquery to identify the dynamic height of the panel.
function resizeElement(id){
var win= window.outerHeight;
var title= $("#title").outerHeight();
var extraPadding= 32;
var height= win- (title+extraPadding);
$("#lorem").css("max-height", height+ "px");
}
resizeElement('left');
resizeElement('right');
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
#wrapper {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
}
.panel {
flex-grow: 1;
min-width: 200px;
max-width: 50%;
padding: 1em;
}
#lorem {
max-height: 50%;
overflow-y: auto;
}
/* add colors :) */
body {
background-color: lightgreen;
}
#left {
background-color: red;
}
#right {
background-color: purple;
}
#lorem {
background: yellow;
}
#wrapper {
background-color: darkblue;
}
textarea {
resize: none;
}
h2 {
background-color: green;
}
input[type=button] {
border: 1px solid black;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="fr">
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Test</h1>
<div id="wrapper">
<div class="panel" id="left">
<div id="title">
<h2>Plic</h2>
</div>
<div id="lorem">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra ante sit amet velit rutrum eleifend. Integer efficitur convallis dui, in aliquet augue pellentesque ut. Aenean ut lobortis nibh. Nullam et laoreet arcu, sed consectetur lectus. Phasellus ut nunc orci. Fusce mauris neque, ullamcorper at auctor vel, mollis vitae dolor. Mauris eget eleifend dui. Donec ut vestibulum ex. Nullam laoreet mi ut augue posuere pellentesque. Curabitur aliquet rutrum leo iaculis aliquet. Donec convallis ante nunc, nec dictum ex fringilla sit amet.</p>
<p>Nam vel lacus non leo auctor ornare. Integer sit amet lectus in elit tristique eleifend ut a libero. Nam eu mauris in sapien semper venenatis. Integer malesuada fringilla sapien vel blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla pretium sem quis nulla efficitur fermentum. Vestibulum leo nisi, imperdiet ut venenatis sed, consectetur cursus purus. Morbi ac ipsum aliquet, tempor enim bibendum, cursus mi. Phasellus eget semper augue, ut viverra tellus. Nulla lacus nisi, congue imperdiet imperdiet sed, sollicitudin eu ex. Ut non dapibus elit. Donec at mollis ante. In aliquet pulvinar sollicitudin. Duis ac orci lobortis, pellentesque lacus in, feugiat urna. Suspendisse consectetur, risus ac elementum condimentum, velit diam convallis ex, id ornare leo arcu at sapien.</p>
<p>Donec bibendum elit id orci rutrum, at eleifend urna porttitor. Vivamus odio quam, gravida at euismod in, vestibulum et dui. Morbi egestas urna eu erat hendrerit, in porttitor libero pharetra. Integer justo mauris, pulvinar tincidunt turpis a, tristique ullamcorper nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin mollis tincidunt nunc eget tempor. Mauris bibendum pretium quam id pretium.</p>
<p>Phasellus quis nisi vehicula, viverra lacus non, porttitor dui. Suspendisse fringilla ullamcorper finibus. Praesent nec auctor elit. Nulla sit amet risus egestas, lacinia orci feugiat, imperdiet metus. Morbi purus metus, egestas eu massa in, aliquet ullamcorper lectus. Praesent condimentum vehicula condimentum. Morbi nec neque a massa egestas tempus. Donec a cursus dui. Nullam scelerisque ultricies odio a dictum. Proin at ullamcorper justo, non auctor justo. Morbi id nunc id augue pulvinar porttitor. Vestibulum congue magna eu odio condimentum rutrum. Pellentesque non pretium nibh.</p>
<p>Nunc ante leo, dapibus sit amet felis id, mattis auctor nisi. Praesent nec lacus posuere, commodo orci in, varius purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus in euismod nibh, nec congue purus. Aenean euismod laoreet eros, et iaculis mi pharetra vitae. Curabitur eget massa non nibh consectetur pellentesque. In varius pharetra urna, ac tristique sapien lobortis vel.</p>
<p>Quisque eu velit mauris. Nunc sit amet placerat tellus. Praesent in fermentum orci. Sed pulvinar facilisis ornare. Vestibulum et metus eget libero tristique vulputate vitae vitae justo. Duis sit amet malesuada dolor. Etiam semper purus id turpis ultrices, eu facilisis purus varius. Vivamus interdum elit ligula, eget condimentum purus tincidunt ac. Nullam at mattis arcu. Nunc vitae mi consequat, hendrerit urna et, gravida nulla. Ut ac purus blandit, volutpat leo non, facilisis lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi dignissim porttitor sem et auctor. Praesent rutrum dignissim orci sit amet euismod.</p>
<p>Pellentesque hendrerit, arcu a iaculis semper, nisi libero porta turpis, et suscipit velit ipsum eu eros. Integer ex elit, pretium vel sapien eget, pulvinar sagittis tellus. Etiam non finibus ante, vitae viverra sem. Nulla in purus in lectus varius pulvinar quis non turpis. Suspendisse sit amet arcu orci. Aliquam erat volutpat. Cras tincidunt enim vitae aliquam commodo. Curabitur non justo viverra, porttitor lorem sed, viverra diam.</p>
<p>Etiam et lobortis quam. Etiam accumsan pharetra lorem, nec sagittis leo vestibulum nec. Aenean pulvinar nisl ac sapien ultricies, eget lacinia neque aliquet. Fusce egestas libero id nisl rutrum, eget egestas turpis interdum. Etiam consectetur convallis ex. Pellentesque mollis tortor vel dapibus tincidunt. Phasellus varius, nibh non consequat rhoncus, nisi est mollis quam, sed lacinia risus nisl sit amet arcu. Donec id tellus eu justo rutrum dictum. Integer tristique risus ut odio rutrum, quis dignissim est varius. Cras a tortor semper, accumsan urna sed, mattis dolor. Ut eget placerat purus. Aliquam in sollicitudin tellus. Vestibulum a semper quam, ut hendrerit enim.</p>
<p>Sed et erat consequat, ultrices est quis, sollicitudin lectus. Sed eu semper sapien. Sed suscipit bibendum lacus in semper. Duis mi tellus, gravida a risus id, bibendum tincidunt lectus. Nam consectetur iaculis tempus. Phasellus id consequat felis. Aenean at ipsum molestie, ornare dui in, mollis turpis. Suspendisse sagittis in sapien ac consequat.</p>
</div>
<div id="footer">
<input type="button" value="Press Me 1">
</div>
</div>
<div class="panel" id="right">
<div>
<h2>Ploc</h2>
</div>
<div>
<textarea></textarea>
</div>
<div id="footer">
<input type="button" value="Press Me 2">
</div>
</div>
</div>
</body>
</html>
I want to expand my menu height to always take 100% of the visible height.
For the moment it only take the 100% at the loading, then if I scroll down there is a white block and it's ugly.
I can't post images because I haven't 10points
The CSS of my menu is the following one:
.nav-sm .container.body .col-md-3.left_col {
min-height: 100%;
width: 70px;
padding: 0;
z-index: 9999;
position: absolute;
}
The thing I want to achieve is to have my menu who always took all the visible height and I can't find how to do that.
Another possibility is to use vh (viewheight) instead of working with percentages:
.nav-sm .container.body .col-md-3.left_col {
min-height: 100vh;
width: 70px;
padding: 0;
z-index: 9999;
position: absolute;
border: 1px solid black;
}
(For reference, check this W3Schools page
Hope this helps
Try this:
div#navi{
width:100px;
height:auto;
top:0px;
bottom:0px;
position:fixed;
background:maroon;
}
body {
height:2000px;
margin: 0px;
padding: 0px;
}
<div id="navi">
test
</div>
.demo{
width:100%;
height:100%;
background:#e0e0e0;
}
body {
height:2000px;
margin:0px;
padding:0px;
}
<body>
<div class="demo">
<span>Hello World</span>
</div>
</body>
Here's how you can do this.
Set the position of the menu to be fixed and then use height: 100%; to make it full height and not move when the page is scrolled.
Here's the working demo: https://jsfiddle.net/jv8a4hhh/
And the code snippent:
body {
margin: 0;
padding: 0;
height: 1000px;
}
navigation {
background: #cccccc;
color: #2e2e2e;
padding: 10px 10px;
position: fixed;
height: 100%;
left: 0;
top: 0;
}
<navigation>
THIS IS MENU
</navigation>
<content>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis accumsan massa, id scelerisque elit. Morbi vel arcu accumsan, facilisis magna quis, accumsan ex. Cras congue enim aliquam, accumsan nulla tincidunt, dapibus justo. Phasellus nec pellentesque
est. Morbi rutrum lectus libero, quis imperdiet turpis ultricies ut. Etiam pharetra dictum dui sit amet iaculis. Curabitur rhoncus gravida augue, dapibus semper nisl rutrum sed. Etiam facilisis lacus eget ullamcorper molestie. Duis vestibulum tortor
lorem, sed auctor tellus efficitur id.
</p>
<p>
Maecenas dapibus erat ac erat vehicula, nec iaculis dui faucibus. Mauris non gravida nunc. Duis eget leo sit amet sapien dictum tempus eu eget enim. Ut eu est vel nibh dictum malesuada in a metus. Sed finibus mollis ipsum, scelerisque maximus mauris blandit
non. Aenean vel urna nisl. Ut facilisis nibh dolor, non malesuada felis facilisis eu. Maecenas ut neque quis purus rutrum pharetra sed id mauris. Ut eu ex eu turpis tincidunt placerat accumsan sed elit. Duis egestas, lectus et euismod tempor, nunc
nibh convallis lectus, fringilla tincidunt odio augue a mauris. Aliquam ultrices arcu et orci laoreet, in congue magna gravida. Mauris posuere quis justo eu egestas.
</p>
<p>
Praesent vehicula venenatis felis vel semper. Aenean pharetra dictum augue, laoreet scelerisque leo euismod vel. Aliquam scelerisque eleifend eleifend. Pellentesque a felis quis diam fringilla cursus at ac nibh. Etiam tellus lectus, vehicula non risus
in, pellentesque tincidunt quam. Integer elit magna, euismod sit amet lorem quis, facilisis consectetur metus. Aliquam dictum ante quis laoreet congue. Morbi hendrerit posuere faucibus. Aliquam augue est, faucibus quis consequat in, pretium tincidunt
libero. Fusce vulputate aliquam turpis eu sollicitudin. Nam accumsan eget nulla ut molestie. Morbi turpis felis, egestas eget velit et, fringilla sodales est.
</p>
<p>
Duis vel velit quis metus efficitur luctus. Proin porttitor sapien eget diam fringilla mollis. Curabitur interdum efficitur enim, laoreet bibendum dui aliquet vitae. Etiam arcu ipsum, condimentum nec scelerisque vitae, ornare at justo. Duis eget tincidunt
sapien. Quisque non arcu volutpat, lacinia sem id, volutpat tellus. Vivamus dui lorem, aliquam non iaculis posuere, euismod et velit. Vestibulum nunc mauris, pharetra porta nisi eu, convallis molestie massa. Donec tincidunt tempus egestas. Sed lectus
sem, vestibulum at felis et, finibus egestas sem.
</p>
<p>
Nulla auctor, quam sed efficitur tempor, felis justo egestas justo, ac bibendum sem ante eu nisi. Aliquam erat volutpat. Suspendisse turpis ante, dapibus in purus et, aliquet rutrum arcu. Suspendisse sem massa, ultrices sed felis vel, mollis porta nisl.
Curabitur lectus urna, porta eu placerat id, tempor eget erat. Duis mattis eget nisi et bibendum. Aliquam nibh libero, elementum et leo nec, egestas vestibulum lacus. Suspendisse vel augue diam. Phasellus fermentum, quam sed euismod finibus, erat
ante fermentum mi, at ullamcorper nisi sapien quis orci. Morbi id sem tincidunt, semper eros non, facilisis velit. Nam tincidunt neque ullamcorper, tristique justo quis, dapibus nunc. In in pharetra enim.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis accumsan massa, id scelerisque elit. Morbi vel arcu accumsan, facilisis magna quis, accumsan ex. Cras congue enim aliquam, accumsan nulla tincidunt, dapibus justo. Phasellus nec pellentesque
est. Morbi rutrum lectus libero, quis imperdiet turpis ultricies ut. Etiam pharetra dictum dui sit amet iaculis. Curabitur rhoncus gravida augue, dapibus semper nisl rutrum sed. Etiam facilisis lacus eget ullamcorper molestie. Duis vestibulum tortor
lorem, sed auctor tellus efficitur id.
</p>
<p>
Maecenas dapibus erat ac erat vehicula, nec iaculis dui faucibus. Mauris non gravida nunc. Duis eget leo sit amet sapien dictum tempus eu eget enim. Ut eu est vel nibh dictum malesuada in a metus. Sed finibus mollis ipsum, scelerisque maximus mauris blandit
non. Aenean vel urna nisl. Ut facilisis nibh dolor, non malesuada felis facilisis eu. Maecenas ut neque quis purus rutrum pharetra sed id mauris. Ut eu ex eu turpis tincidunt placerat accumsan sed elit. Duis egestas, lectus et euismod tempor, nunc
nibh convallis lectus, fringilla tincidunt odio augue a mauris. Aliquam ultrices arcu et orci laoreet, in congue magna gravida. Mauris posuere quis justo eu egestas.
</p>
<p>
Praesent vehicula venenatis felis vel semper. Aenean pharetra dictum augue, laoreet scelerisque leo euismod vel. Aliquam scelerisque eleifend eleifend. Pellentesque a felis quis diam fringilla cursus at ac nibh. Etiam tellus lectus, vehicula non risus
in, pellentesque tincidunt quam. Integer elit magna, euismod sit amet lorem quis, facilisis consectetur metus. Aliquam dictum ante quis laoreet congue. Morbi hendrerit posuere faucibus. Aliquam augue est, faucibus quis consequat in, pretium tincidunt
libero. Fusce vulputate aliquam turpis eu sollicitudin. Nam accumsan eget nulla ut molestie. Morbi turpis felis, egestas eget velit et, fringilla sodales est.
</p>
<p>
Duis vel velit quis metus efficitur luctus. Proin porttitor sapien eget diam fringilla mollis. Curabitur interdum efficitur enim, laoreet bibendum dui aliquet vitae. Etiam arcu ipsum, condimentum nec scelerisque vitae, ornare at justo. Duis eget tincidunt
sapien. Quisque non arcu volutpat, lacinia sem id, volutpat tellus. Vivamus dui lorem, aliquam non iaculis posuere, euismod et velit. Vestibulum nunc mauris, pharetra porta nisi eu, convallis molestie massa. Donec tincidunt tempus egestas. Sed lectus
sem, vestibulum at felis et, finibus egestas sem.
</p>
<p>
Nulla auctor, quam sed efficitur tempor, felis justo egestas justo, ac bibendum sem ante eu nisi. Aliquam erat volutpat. Suspendisse turpis ante, dapibus in purus et, aliquet rutrum arcu. Suspendisse sem massa, ultrices sed felis vel, mollis porta nisl.
Curabitur lectus urna, porta eu placerat id, tempor eget erat. Duis mattis eget nisi et bibendum. Aliquam nibh libero, elementum et leo nec, egestas vestibulum lacus. Suspendisse vel augue diam. Phasellus fermentum, quam sed euismod finibus, erat
ante fermentum mi, at ullamcorper nisi sapien quis orci. Morbi id sem tincidunt, semper eros non, facilisis velit. Nam tincidunt neque ullamcorper, tristique justo quis, dapibus nunc. In in pharetra enim.
</p>
</content>
Hope this helps :)
I have a problem with my html code I refer to the id class but it is not going to there, but to another rule. I think the problem have to do with the fixed header, but I can't find the solution for this. This is my html code:
/* general */
html {
width: 100%;
height: 100%;
position: relative;
}
body {
width: 100%;
margin: 0;
height: 100%;
position: relative;
}
/* header */
header {
position: fixed;
z-index: 2;
top: 0;
background-color: red;
width: 100%;
height: 125px;
padding: 1em;
}
.spacer {
position: relative;
width: 100%;
height: calc(125px + 2em);
}
header h1 {
margin: 0;
}
/* bar */
header p {
margin-bottom: 0;
}
/*menu*/
header li {
float: left;
display: block;
background-color: white;
padding: 2px;
list-style-type: none;
margin-top: 0 !important;
margin: 1em;
}
/* middle */
.middle {
left: 0;
float: left;
padding: 2em 4em;
background-color: lightgreen;
}
.middle p {
margin: 0;
}
<header>
<h1> HTML </h1>
<p>On the menu today:</p>
<ul>
<li>Number 1
</li>
<li>Number 2
</li>
<li>Number 3
</li>
<li>Number 4
</li>
</ul>
</header>
<div class="spacer"> </div>
<div class="middle">
<p id="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fermentum, odio in vehicula placerat, lacus sapien auctor lectus, id tempor dui mauris luctus odio. Maecenas a ex aliquet, lobortis mauris ut, fermentum nulla. Suspendisse dignissim placerat
purus. Etiam feugiat, erat at rhoncus rutrum, nulla mi ornare justo, a sagittis tortor metus non augue. Fusce vel molestie dolor. Etiam congue a ipsum eu interdum. Pellentesque cursus lobortis leo eu euismod. Sed et ante pharetra, posuere lectus sit
amet, elementum nisi.
<br>Sed at felis eu nulla pulvinar sagittis quis ut libero. Praesent bibendum lacus a turpis elementum, nec ultrices turpis placerat. Nullam egestas, purus pharetra faucibus elementum, odio arcu faucibus purus, ac suscipit arcu eros eget felis. Nulla
consequat rhoncus turpis, vitae porta velit semper et. Duis commodo vehicula ipsum, non fermentum lectus pellentesque a. Donec ut luctus leo, iaculis tristique tellus. Sed pharetra turpis mattis orci sodales aliquam. Praesent aliquam cursus sagittis.
Morbi eget convallis mi. Donec lacinia orci euismod hendrerit venenatis. Vivamus vel ex a odio consectetur tincidunt sed sed leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent pretium felis
et ex laoreet congue. Nulla vitae dolor ligula. Aenean mollis consectetur posuere.</p>
<br>
<p id="2">Quisque lacinia, orci consequat volutpat imperdiet, ipsum massa molestie ante, posuere laoreet elit mauris in ante. Sed suscipit felis sagittis nunc pellentesque, vel ullamcorper orci pharetra. Aenean hendrerit commodo velit, ut tincidunt lectus mattis
nec. Nunc dictum turpis sed gravida semper. Mauris dignissim risus sed porta pulvinar. Curabitur ex enim, vehicula sit amet tincidunt et, dignissim vel urna. Maecenas magna magna, venenatis at lectus a, ornare consequat massa. Pellentesque vitae ligula
in augue faucibus pellentesque. Duis sed tellus vel risus mattis convallis id ut ex. Ut ipsum ex, dignissim nec lectus in, pellentesque euismod lorem. Suspendisse ut mauris molestie ex dignissim dictum. Duis vitae volutpat nisl, vel efficitur nulla.
<br>Maecenas justo est, elementum et velit in, consequat ullamcorper mi. Nullam nec efficitur turpis. Aenean semper mi gravida, tempor lectus in, pellentesque tortor. Quisque porta risus sit amet sem dictum, vel pretium massa maximus. Etiam mattis nulla
et dictum malesuada. Pellentesque vitae magna sed augue ultricies consequat. Aenean tellus ante, sodales id laoreet vitae, commodo facilisis nulla. In nec lorem turpis. Morbi semper libero risus, eget aliquet sem porttitor eu. Nunc nec ultricies ex.
Morbi elementum mattis ante et pharetra. Nulla dignissim congue augue aliquam ultricies. Aliquam iaculis quam eu arcu vestibulum, eu consectetur odio porttitor. Phasellus placerat sem pellentesque ex dictum auctor.</p>
<br>
<br>
<br>
<p id="3">
Mauris nisl velit, tristique auctor nunc id, cursus fringilla arcu. Donec faucibus dolor sit amet leo volutpat, eget pellentesque neque porta. Phasellus sagittis lacus a eros pulvinar, a aliquam diam venenatis. In a lacinia sem. Phasellus mollis vel velit
et fermentum. Sed tellus dui, aliquam in velit et, consectetur placerat dui. Etiam elementum, lectus eget commodo condimentum, urna enim placerat velit, eu rhoncus mauris lacus non nisl. Aliquam lorem mi, aliquam sed blandit at, ornare quis lacus.
Maecenas nec maximus metus. Integer sem lorem, posuere id nunc non, laoreet efficitur neque. Duis sit amet massa vitae est porttitor tempor a non ex. Cras pharetra enim dictum justo mattis lobortis. Maecenas viverra, ipsum ut pretium mattis, risus
lectus malesuada augue, ac eleifend orci nisl sit amet augue. Nam quis metus finibus, sagittis leo id, tincidunt nisi. Pellentesque non feugiat elit, sed viverra erat.
</p>
<br>
<p id="4">Nullam mollis, felis non egestas malesuada, ante nunc elementum massa, id scelerisque nulla augue vel felis. Aliquam hendrerit justo mattis augue pretium, at imperdiet lorem rhoncus. Cras sodales a arcu vel tempus. Donec semper nibh ut enim lobortis,
at euismod dui finibus. Duis lacinia tellus augue, eu mollis nibh varius in. Nulla in mi porta, mattis diam id, bibendum felis. In hac habitasse platea dictumst. Mauris nec accumsan diam. Duis pulvinar tortor in enim rutrum, et dapibus lacus hendrerit.
In hac habitasse platea dictumst. Donec ut mauris sed lacus dictum commodo. Suspendisse nec lorem eget nisi tristique interdum id nec est. Phasellus nec magna fringilla, cursus ligula quis, consequat leo. Phasellus in blandit leo, non vestibulum justo.
In nec velit sit amet arcu hendrerit commodo id in risus. Etiam mi urna, hendrerit malesuada quam eget, sagittis fermentum dui.
<br>
</p>
</div>
<footer>
</footer>
Your spacer div appears to be sitting on top of your header. If you give your header a z-index the links work again:
/* general */
html {
width: 100%;
height: 100%;
position: relative;
}
body {
width: 100%;
margin: 0;
height: 100%;
position: relative;
}
/* header */
header {
position: fixed;
top: 0;
background-color: red;
width: 100%;
height: 125px;
padding: 1em;
z-index:2;
}
.spacer {
position: relative;
width: 100%;
height: calc(125px + 2em);
}
header h1 {
margin: 0;
}
/* bar */
header p {
margin-bottom: 0;
}
/*menu*/
header li {
float: left;
display: block;
background-color: white;
padding: 2px;
list-style-type: none;
margin-top: 0 !important;
margin: 1em;
}
/* middle */
.middle {
left: 0;
float: left;
padding: 2em 4em;
background-color: lightgreen;
}
.middle p {
margin: 0;
}
<header>
<h1> HTML </h1>
<p>On the menu today:</p>
<ul>
<li>Number 1
</li>
<li>Number 2
</li>
<li>Number 3
</li>
<li>Number 4
</li>
</ul>
</header>
<div class="spacer"> </div>
<div class="middle">
<p id="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fermentum, odio in vehicula placerat, lacus sapien auctor lectus, id tempor dui mauris luctus odio. Maecenas a ex aliquet, lobortis mauris ut, fermentum nulla. Suspendisse dignissim placerat
purus. Etiam feugiat, erat at rhoncus rutrum, nulla mi ornare justo, a sagittis tortor metus non augue. Fusce vel molestie dolor. Etiam congue a ipsum eu interdum. Pellentesque cursus lobortis leo eu euismod. Sed et ante pharetra, posuere lectus sit
amet, elementum nisi.
<br>Sed at felis eu nulla pulvinar sagittis quis ut libero. Praesent bibendum lacus a turpis elementum, nec ultrices turpis placerat. Nullam egestas, purus pharetra faucibus elementum, odio arcu faucibus purus, ac suscipit arcu eros eget felis. Nulla
consequat rhoncus turpis, vitae porta velit semper et. Duis commodo vehicula ipsum, non fermentum lectus pellentesque a. Donec ut luctus leo, iaculis tristique tellus. Sed pharetra turpis mattis orci sodales aliquam. Praesent aliquam cursus sagittis.
Morbi eget convallis mi. Donec lacinia orci euismod hendrerit venenatis. Vivamus vel ex a odio consectetur tincidunt sed sed leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent pretium felis
et ex laoreet congue. Nulla vitae dolor ligula. Aenean mollis consectetur posuere.</p>
<br>
<p id="2">Quisque lacinia, orci consequat volutpat imperdiet, ipsum massa molestie ante, posuere laoreet elit mauris in ante. Sed suscipit felis sagittis nunc pellentesque, vel ullamcorper orci pharetra. Aenean hendrerit commodo velit, ut tincidunt lectus mattis
nec. Nunc dictum turpis sed gravida semper. Mauris dignissim risus sed porta pulvinar. Curabitur ex enim, vehicula sit amet tincidunt et, dignissim vel urna. Maecenas magna magna, venenatis at lectus a, ornare consequat massa. Pellentesque vitae ligula
in augue faucibus pellentesque. Duis sed tellus vel risus mattis convallis id ut ex. Ut ipsum ex, dignissim nec lectus in, pellentesque euismod lorem. Suspendisse ut mauris molestie ex dignissim dictum. Duis vitae volutpat nisl, vel efficitur nulla.
<br>Maecenas justo est, elementum et velit in, consequat ullamcorper mi. Nullam nec efficitur turpis. Aenean semper mi gravida, tempor lectus in, pellentesque tortor. Quisque porta risus sit amet sem dictum, vel pretium massa maximus. Etiam mattis nulla
et dictum malesuada. Pellentesque vitae magna sed augue ultricies consequat. Aenean tellus ante, sodales id laoreet vitae, commodo facilisis nulla. In nec lorem turpis. Morbi semper libero risus, eget aliquet sem porttitor eu. Nunc nec ultricies ex.
Morbi elementum mattis ante et pharetra. Nulla dignissim congue augue aliquam ultricies. Aliquam iaculis quam eu arcu vestibulum, eu consectetur odio porttitor. Phasellus placerat sem pellentesque ex dictum auctor.</p>
<br>
<br>
<br>
<p id="3">
Mauris nisl velit, tristique auctor nunc id, cursus fringilla arcu. Donec faucibus dolor sit amet leo volutpat, eget pellentesque neque porta. Phasellus sagittis lacus a eros pulvinar, a aliquam diam venenatis. In a lacinia sem. Phasellus mollis vel velit
et fermentum. Sed tellus dui, aliquam in velit et, consectetur placerat dui. Etiam elementum, lectus eget commodo condimentum, urna enim placerat velit, eu rhoncus mauris lacus non nisl. Aliquam lorem mi, aliquam sed blandit at, ornare quis lacus.
Maecenas nec maximus metus. Integer sem lorem, posuere id nunc non, laoreet efficitur neque. Duis sit amet massa vitae est porttitor tempor a non ex. Cras pharetra enim dictum justo mattis lobortis. Maecenas viverra, ipsum ut pretium mattis, risus
lectus malesuada augue, ac eleifend orci nisl sit amet augue. Nam quis metus finibus, sagittis leo id, tincidunt nisi. Pellentesque non feugiat elit, sed viverra erat.
</p>
<br>
<p id="4">Nullam mollis, felis non egestas malesuada, ante nunc elementum massa, id scelerisque nulla augue vel felis. Aliquam hendrerit justo mattis augue pretium, at imperdiet lorem rhoncus. Cras sodales a arcu vel tempus. Donec semper nibh ut enim lobortis,
at euismod dui finibus. Duis lacinia tellus augue, eu mollis nibh varius in. Nulla in mi porta, mattis diam id, bibendum felis. In hac habitasse platea dictumst. Mauris nec accumsan diam. Duis pulvinar tortor in enim rutrum, et dapibus lacus hendrerit.
In hac habitasse platea dictumst. Donec ut mauris sed lacus dictum commodo. Suspendisse nec lorem eget nisi tristique interdum id nec est. Phasellus nec magna fringilla, cursus ligula quis, consequat leo. Phasellus in blandit leo, non vestibulum justo.
In nec velit sit amet arcu hendrerit commodo id in risus. Etiam mi urna, hendrerit malesuada quam eget, sagittis fermentum dui.
<br>
</p>
</div>
<footer>
</footer>
They are scrolling to the right place, the only problem is they are going under the Red Header, so you see the wrong one, You can rectify this by increasing the spacer's height depending on which link is clicked. Hope this helps.
Updated : The solution can be found here as "codepen.io/ukneeq/pen/zsKIH"
I am making a website in which I have a fixed position menu bar on the left side, a fixed position menu on the top and a scrolling area on the right for the main content of the page. The issue I am having is that the text scrolls over the top menu as such:
Before Scrolling:
After Scrolling
Here is my current code (home.php):
<style>
#heading{margin-top:50px;}
#left {
width: 20%;
height: 100%;
position: fixed;
margin-top:50px;
outline: 1px solid;
background-color:#D6EBEB
}
#right {
width: 80%;
height: auto;
padding-top:50px;
position: absolute;
right: 0;
}
</style>
<?php
//IncludeHeader
include_once 'includes/header.php';
?>
<div id="right">
<legend><h1 align="center" class="text-info" >Home Page</h1></legend>
<h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed ipsum porttitor, mollis diam sit amet, elementum enim. Nunc eleifend dui eu augue condimentum sollicitudin. Sed vel tristique lacus. Morbi rutrum dui at pellentesque blandit. Praesent congue, turpis eget luctus posuere, dui mi bibendum sem, vitae hendrerit purus lectus nec lorem. Cras non porttitor nulla. Praesent mollis nec urna ac laoreet. Curabitur at ipsum a ante iaculis fermentum. Sed ut sagittis velit, ac tincidunt purus. Suspendisse auctor mauris nibh, feugiat pretium felis ultrices quis. Sed rutrum finibus bibendum. Mauris sagittis leo at mollis efficitur. Cras eu finibus eros, nec accumsan lorem. Nulla consequat lacus quis massa sagittis egestas. Nam at orci pharetra, commodo nibh eget, venenatis dui. Donec orci tellus, egestas ut leo eget, accumsan hendrerit felis.
Sed ultrices, nisi vel mattis condimentum, nunc dui fringilla felis, at facilisis massa turpis eu lacus. Morbi lectus urna, vehicula in consectetur posuere, egestas sit amet mauris. Donec nisi leo, luctus id tristique non, ultrices quis purus. Cras quis convallis tortor, sit amet laoreet odio. Donec aliquet ipsum eu fringilla accumsan. Integer gravida orci in laoreet tristique. Maecenas scelerisque leo non felis malesuada, quis commodo mauris porttitor. Aliquam ut commodo risus. Integer condimentum ipsum id maximus pretium.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc non aliquam lorem, sit amet mollis tellus. Aenean vulputate quam nibh, vitae congue dolor lacinia ut. Nunc pharetra ligula turpis, vitae congue felis sollicitudin non. Duis ut justo sit amet nulla dictum commodo et non elit. Morbi varius metus massa, nec fermentum sapien blandit a. Curabitur at lectus sapien. Praesent at lectus nec nulla convallis efficitur blandit nec dui. Duis sed est placerat orci fringilla pellentesque commodo et sem. Sed viverra sem eget pretium ultricies. Duis a diam eget sapien tincidunt dignissim nec sed quam. In ultricies tincidunt sapien id blandit. In ut justo non turpis commodo gravida. Phasellus auctor venenatis ante, interdum fermentum lacus venenatis sit amet. Vivamus nisl lorem, posuere a vulputate quis, placerat ut mi. Vestibulum facilisis bibendum nunc, vitae blandit purus.
Sed eget orci lectus. Sed egestas risus nibh, vel semper metus accumsan nec. Cras gravida diam vitae lorem vestibulum viverra. Vivamus mollis condimentum vehicula. Nullam mauris est, laoreet sit amet suscipit ac, interdum a massa. Suspendisse aliquam mollis arcu non malesuada. Quisque tellus erat, lacinia in augue vitae, mattis vulputate dolor. Donec ultricies vel augue non fermentum. Nulla et convallis urna, quis ultrices quam. Sed urna ipsum, porta sed dapibus sed, commodo eu lorem. Proin tempor neque ut nulla varius lacinia et id nunc. Nunc condimentum porta tellus eu suscipit. Ut convallis turpis sed diam gravida, a blandit tortor dictum.
In et aliquet justo. Proin id leo aliquet nibh elementum volutpat tincidunt malesuada est. In vehicula eleifend ante, at tincidunt nisl lobortis quis. Sed gravida scelerisque est egestas consequat. Curabitur fringilla, enim quis ornare laoreet, sapien nulla bibendum lacus, vel malesuada felis dui viverra enim. Praesent varius dictum nulla. Pellentesque eu gravida velit. Vivamus auctor arcu lectus, et placerat dolor molestie id. Aliquam leo lacus, consequat fermentum porta sed, imperdiet a nibh. Aliquam rutrum nunc sit amet lacus auctor, eu sollicitudin erat auctor. Nullam at rhoncus turpis. Aenean venenatis quam ut tellus gravida, vel suscipit tellus auctor.
Nulla facilisi. Aliquam id condimentum sapien, vel laoreet justo. Nullam erat odio, facilisis a velit eget, consequat laoreet velit. Vivamus dictum sit amet nibh finibus pharetra. Aliquam et nibh vitae massa scelerisque dapibus. Etiam ultrices, tellus eget dapibus scelerisque, augue dolor faucibus quam, sed gravida nunc eros ac dolor. Donec eu metus nec mauris lobortis condimentum sed ac libero. Nullam sit amet nulla euismod, pharetra libero nec, molestie sapien. Mauris gravida placerat est, vitae imperdiet orci lobortis in. Nulla vitae vehicula sem. Vestibulum nec sagittis mauris.
Nulla pharetra ligula nec arcu porta, vel elementum tortor malesuada. Vestibulum metus urna, egestas a viverra eu, convallis at ex. Donec elit elit, maximus ut odio at, tempus interdum erat. In pharetra commodo mi id vestibulum. Sed tristique dui ut elit lacinia feugiat. Quisque vitae ante rutrum ante luctus scelerisque. In hac habitasse platea dictumst. Quisque metus magna, lacinia a orci et, volutpat mattis nisi. </h4>
<br/>
</div>
Here is the header.php code:
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<?php /* Check for set Name */ if (!$fname) { $fname = 'Please Sign In'; } ?>
<Style>
#nav{ background-color: #222; position: fixed; width: 100%; top: 0; }
#nav ul{ list-style-type: none; padding: 0; margin: 0; text-align="right";}
#nav ul li{ display: inline-block; }
#nav ul li:hover{ background-color: #333; }
#nav ul li a,visited{ color: #CCC; display: block; padding: 15px; text-decoration: none; }
#nav-wrapper
{
width:100%;
margin: 0 auto;
padding-right:10px;
}
</Style>
<div id="nav">
<div id="nav-wrapper">
<ul>
<li style="color: white; text-align:left;">Home</li>
<li style="color: white; text-align:right;margin-left:85%;"><?php echo $fname;?></li>
</ul>
</div>
</div>
Thanks for any help or suggestions as to why this is happening and how it can be fixed!
You have applied the Right Column as absolute position but it should be static.
Try removing position:absolute and add like belw
#right {
width: 80%;
height: auto;
padding-top:50px;
float:right;
}