This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 3 years ago.
I'm trying to create a simple website that has a Header containing the logo and other information, then a ribbon as separator and then a two-column section. Left column will have a selector. Right column will have information depending on the option chosen on the selector.
I was able to do this so far but now I wanna take it to the next level.
I would like my site to always fit to the window so no vertical scrollbar needed.
I'm comfortable with the sizes of my header and ribbon so I want the two-column section to take the remaining space in the window. The scrollbar, if needed, would be on the information div.
Just in case, I want the left-half (selector) to take as much space as it needs. Right-half (information) should adjust to the space it has left.
I have this code so far:
CSS
.container {
display: table;
width: 100%;
}
.left-half {
display: table-cell;
background-color:#7ec0ee;
}
.right-half {
display: table-cell;
overflow: auto;
}
HTML
<div id="header" style="background-color:#7ec0ee; padding-top:20px; padding-left:5px; padding-bottom:20px" align="center">
<div id="header-logo" align="left">
<img src=".." alt="MDN" width="160" height="113">
</div>
</div>
<div id="black-banner" style="background-color:black; padding:2px"> </div>
<div id="container" class="container">
<div class="left-half">
<select>..</select>
</div>
<div id="content" class="right-half"></div>
</div>
Here I have use some bootstrap classes. I think this will help you out.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm" style="background-color: lavender">
One of three columns
</div>
<div class="col-sm" style="background-color: #EAE7EE">
One of three columns
</div>
<div class="col-sm" style="background-color: #E6E2EB">
One of three columns
</div>
</div>
</div>
</body>
</html>
I suggest using flex. It's fantastic for responsive designs. You can set the width in the flex property on your left or right halwes.
.container {
display: flex;
width: 100%;
height: calc(100vh - 98px); //98px is the height of your header
}
.left-half {
flex: 1;
background: red;
}
.right-half {
flex: 1;
padding: 1em;
overflow: auto;
background: blue;
}
<div id="header" style="background-color:#7ec0ee; padding-top:20px; padding-left:5px; padding-bottom:20px" align="center">
<div id="header-logo" align="left">
<img src=".." alt="MDN" width="160" height="113">
</div>
</div>
<div id="black-banner" style="background-color:black; padding:2px"> </div>
<div id="container" class="container">
<div class="left-half">
<select>..</select>
</div>
<div id="content" class="right-half"></div>
</div>
This might work for you. you can make use of the calc function in CSS.
.container {
display: flex;
width: 100%;
height: calc(100vh - 100px); //Replace this 100px with whatever value elements other than container are occupying
}
.left-half {
width:50%;
background-color:#7ec0ee;
}
.right-half {
background: red;
width: 50%;
}
Related
I want to create an horizontal carousel that has a phrase or several words scrolling end to end of the screen in a loop.
What I've tried is duplicating the phrase in two different divs, to avoid the gap in the animation (otherwise, the phrase goes almost away before it starts from the beginning and looks awful).
The problem (even though I've tried to delay the 2nd animation by half the time of the first one for them not to overlap), depending on the device, the text still overlaps.
How can I create such cacrousel (with or without JS) making sure texts don't overlap? https://tucuerpofit.com/testcarousel/
I've made an example, you could customize it as you want.
<!DOCTYPE html>
<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.0">
<title>Carousel</title>
</head>
<body>
<div id="carousel" >
<p>Personal</p>
</div>
<style>
body{
max-width: 100vw;
max-height: 100vh;
background-color: black;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
}
p{
margin: 10rem;
font-size: 2rem;
font-weight: 900;
color: white;
}
#carousel{
position: absolute;
top: 50vh;
left: 0%;
animation: mover 5s infinite;
}
#carousel>*{
display: inline-flex;
}
#carousel::before{
color: white;
content: 'YOUR TEXT';
}
#carousel::after{
color: white;
content: 'YOUR TEXT';
}
#keyframes mover {
0%{
position: absolute;
top: 50vh;
left: 0%;
}
100%{
position: absolute;
top: 50vh;
left: 85%;
}
}
</style>
</body>
</html>
Use Bootstrap carousel, this is much easier and more flexible to work with: here is an example:
Update: The main reason I am telling you to use this, is you have so many ways to design your carousel with all features in Bootstrap, here I just created the simplest one, you can use Left or Right or Click to move to the next slide, also it automatically moves to next slide.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jquery-ui.min.css" rel="stylesheet">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<title>Stack16</title>
</head>
<body>
<h1 class="text-center">Hello, text carousel!</h1>
<div id="textCaro" class="carousel slide mt-1 mb-1" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#textCaro" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#textCaro" data-bs-slide-to="1" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#textCaro" data-bs-slide-to="2" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#textCaro" data-bs-slide-to="3" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner mb-3 mt-3">
<div class="carousel-item active" >
<div class="card-header">
<h4 class="text-center">Text 1</h4>
</div>
</div>
<div class="carousel-item" >
<div class="card-header">
<h4 class="text-center">Text 1</h4>
</div>
</div>
<div class="carousel-item" >
<div class="card-header">
<h4 class="text-center">This is a long text...............</h4>
</div>
</div>
<div class="carousel-item" >
<div class="card-header">
<h4 class="text-center">Text 1</h4>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#textCaro" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#textCaro" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The final result:
I am developing mobile app. I am using HTML, CSS, bootstrap, JavaScript for development. When the user taps on the textbox inside the footer, the keyboard pops up, screen is not moving up for android phones, but for ios it is working fine. I am trying to scroll down to the bottom div when the user taps on the textbox.
<body onload="hidebtn()">
<header class="topBar">
<ul class="nav nav-tabs row" id="myTab" role="tablist">
<li class="nav-item col">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" style="padding-top: 20px; font-size: 14px; cursor: pointer;" onclick="chat()">Chat</a>
</li>
<li class="nav-item col">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false" style="padding-top: 20px; font-size: 14px; cursor: pointer;" onclick="ticketStatus()">Incident</a>
</li>
<li class="nav-item col">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false" style="padding-top: 20px; font-size: 14px; cursor: pointer;" onclick="ticketStatus()">Service Request</a>
</li>
</ul>
</header>
<br><br>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="container">
<div class="row h-100">
<div id="topButtons" class="card-body" style="padding: 0; margin-top: 12px; height: 80px;"></div>
<div id="chatBody" class="card-body anyClass">
<p class="WC_message_fl"><img class="con_im" src="images\chatrobo.png"></p>
<p class="WC_message_fl sahlaIntro"> Type your Questions & Start chatting</p>
</br></br>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" >
</br></br>
<p class="WC_message_fl" id='msg_table'></p>
<div class="container" style="overflow-x:hidden;overflow-y:auto;height:84vh;"><div class="row" id="table"></div>
</div>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab" >
</br></br>
<p class="WC_message_fl" id='msg_sr_table'></p>
<div class="container" style="overflow-x:hidden;overflow-y:auto;height:84vh;"><div class="row" id="sr_table"></div></div>
</div>
</div>
<footer id="footerChtbt" style="position:fixed;bottom:0;right:0;left:0;line-height: 20px;background-color: #ECEFF1;font-size: 0.6rem;border-top: 1px solid #aaa;box-shadow: 0 1px 5px 0 #9B9B9B;">
<span id="sahlaResp" style="color:blue; position: relative;left: 7vw;top:0;"></span>
<div class="container">
<div class="row">
<div class="col-10">
<input id="query" type="text" class="form-control" placeholder = 'Ask Sahla bot...'" onkeyup="pressedkey(event)" onClick="clickedQuery()" style="outline:0;box-shadow:none;font-size:14px;" required/>
</div>
<div class="col-2" style="padding: 0; margin-top: 2px;">
<img src="images/send_icon.svg" name="submitbtn" onClick="sendbtn()" style="cursor: pointer; width: 38px;">
</div>
</div>
</div>
</footer>
I am trying to scroll down to the div on click of textbox
function clickedQuery() {
setTimeout(function(){ $("#chatBody").scrollTop($("#chatBody")[0].scrollHeight); }, 100);
};
I've been checking your code, that sincerely you could have cleaned a bit for us... You should send us a link were we can properly check the problem. However I'll try to guide you with the little info I have.
In my experience, browsers resize when the keyboard opens on mobile. The content "overlapped" by the keyboard is accessible scrolling down. The real overlap happens on apps that has set the option to not resize when opening the keyboard. In that case, you never put inputs that can be overlapped, or if you do, you can make them position over the top line of the keyboard when receive the focus.
To do that you normally use position: fixed to position your input just on top of the bottom line of the viewport which should match the top line of the keyboard.
body {
margin: 0;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
background: #ccc;
}
input {
margin: 6px;
}
input:focus {
position:fixed;
bottom: 0;
width: calc(100% - 12px);
}
<footer>
<input id="input" type="text">
</footer>
But as you report that your content is being overlapped maybe there is something else that I can't check without an online version of your code. So another solution is to use JS to relocate your whole footer. Then you can style it as you will to make it look nicer.
Aside of that. I recommend you add a button that blurs the input field in case the users doesn't finally want to summit. That will close the keyboard.Something like this
Hope this solves your issue.
$('#input').on('focus', function(){
$(this).parent('footer').css('bottom', '50%');
});
body {
margin: 0;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
padding: 6px;
background: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<footer>
<input id="input" type="text">
</footer>
I have couple of questions about site, which I'm making with help of Bootstrap 4. I would like to make simple page just using on screen space (no scroll except mobile version) with logo in the upper middle of the page, full width navbar and then 2 rows of 3 full width images, which would be cropped as resolution allows. Here is the sketch. I made some HTML/CSS proposals, but they didn't work properly. Do you have some ideas how to make it? :/
Thanks a lot!
<!DOCTYPE html>
<html lang ="cs">
<head>
<meta charset="utf-8">
<!-- Mobile adaptation -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Page information -->
<meta name="description" content="GeoExpo Eshop. Od replik přes zkameněliny do trilobitů.">
<meta name="keywords" content="eshop zoo, eshop Zoo Praha, GeoExpo, zkameněliny, suvenýry, repliky, šutry, kameny">
<meta name="author" content="Ondřej Sloup">
<!-- Mine Stylesheet -->
<link rel="stylesheet" href="stylesheet/stylesheet.css">
<!-- Imported Stylesheets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
<!-- Scripts (jQuery) -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<!-- Tittle -->
<title>Geo Expo</title>
</head>
<body>
<header>
<img class="logo d-block img-fluid mx-auto" src="./logo/PNG.png" alt="Logo" />
</header>
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Toogle" aria-controls="Toogle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fa fa-bars mx-auto" aria-hidden="true"></i></span>
</button>
<div class="collapse navbar-collapse" id="Toogle">
<ul class="navbar-nav mt-2 mt-lg-0 mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Repliky</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Unikáty</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Instalace</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
</div>
</nav>
<main class="container-fluid p-0">
<div class="row align-items-center no-gutters">
<div class="col-4">
<img class="image" width="auto" src="./images/bridge.jpg" alt="Bridge">
</div>
<div class="col-4">
<img class="image" width="auto" src="./images/park.jpg" alt="Park">
</div>
<div class="col-4">
<img class="image" width="auto" src="./images/tunnel.jpg" alt="Tunnel">
</div>
</div>
<div class="row align-items-center no-gutters">
<div class="col-4">
<img class="image" width="auto" src="./images/bridge.jpg" alt="Bridge">
</div>
<div class="col-4">
<img class="image" width="auto" src="./images/park.jpg" alt="Park">
</div>
<div class="col-4">
<img class="image" width="auto" src="./images/tunnel.jpg" alt="Tunnel">
</div>
</div>
</main>
And CSS
/*INSERT*/
#import url('https://fonts.googleapis.com/css?family=Cinzel+Decorative');
#import url('https://fonts.googleapis.com/css?family=Cinzel');
/*ALL*/
html, body, main {
height: 100% !important;
max-width: 100% !important;
}
body {
background: grey !important;
}
/*Header*/
header {
height: 15%;
}
.logo {
display: inline-block;
padding: 1rem 0 .5rem 0 !important;
}
/*Images*/
.row {
height: 30% !important;
}
/* NavBar */
nav {
font-size: 13pt;
font-family: 'Cinzel', sans-serif;
padding: .3rem 0 .3rem 0 !important;
text-transform: capitalize;
}
.nav-link {
color: #fff !important;
margin: 0 25% 0 25%;
}
.nav-link:hover {
font-style: underline;
}
For future, you can use the http://shoelace.io/
That being said, your html code should look like this:
<div class="container">
<div class="row Logo">
<div class="col-sm-3">
<!-- This is where you should put your logo image -->
</div>
</div>
<div class="row Menu">
<div class="col-sm-12">
<!-- this is where your menu goes in -->
</div>
</div>
<div class="row Images">
<div class="col-sm-4">
<!-- your first image -->
</div>
<div class="col-sm-4">
<!-- your second image -->
</div>
<div class="col-sm-4">
<!-- your third image -->
</div>
<div class="col-sm-4">
<!-- your forth image -->
</div>
<div class="col-sm-4">
<!-- your fifth image -->
</div>
<div class="col-sm-4">
<!-- your last image -->
</div>
</div>
</div>
Also, have a look at the bootstrap layout page https://getbootstrap.com/docs/4.0/layout/grid/
For some reason no matter what I do my navbar displays menu items horizontally on collapse with my logo in the middle of them! When I used the visible-xs etc it aligns it to the left for some reason when it is visible!
I have tried methods found on other similar overflow questions such as displaying the list items inline-block (despite not wanting to use inline-styles!)
But nothing is working for me!
I know the problem is because I have my logo in the center of my menu items on desktop view, so it isn't a standard menu but there must be a way around this to make my menu items display vertically without the logo in the middle? I am new-ish to this so perhaps I am just being stupid and missing something?
I am using jquery mobile if it makes any difference (could it be this breaking the menu and preventing it from being closed?)
here is what I have and have tried:
HTML for navbar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, no-index">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favv.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script type="text/javascript" src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="../assets/js/main.js"></script>
<!-- Custom styles for this template -->
<link href="../node_modules/jquery-mobile/mobilestyles.css" rel="stylesheet">
<link href="/Silver-Lining/css/template.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]>
<!--============ Navigation ===============-->
<nav class="navbar navbar-default navbar-fixed-top text-center">
<nav id="navbar-primary" class="navbar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="top-social">
<a href="tel:+1-303-499-7111"> <i class="fa fa-phone" aria-hidden="true">
</i> 0787000000
</a>
<a href="#">
<i class="fa fa-facebook-official" aria-hidden="true"></i>
</a>
<a href="#">
<i class="fa fa-twitter-square" aria-hidden="true"></i>
</a>
<a href="#">
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
<a href="#">
<i class="fa fa-linkedin-square" aria-hidden="true"></i>
</a>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<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 class="collapse navbar-collapse" id="navbar-primary-collapse">
<ul class="nav navbar-nav">
<li>ABOUT</li>
<li>OUR CARS</li>
<li>PRICES</li>
<a class="hidden-sm-down" href="index.php" data-ajax="false"><img src="../assets/images/logo" width="250" alt="Logo"></a>
<li>PACKAGES</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
CSS example to make menu items appear vertically on Collapse:
#media (max-width: 932px) {
#navbar-primary .navbar-nav li a {
float: none;
position: inherit;
display: inline-block !important;
vertical-align: top;
max-height: 300px;
}
}
Css for navbar
// Remove excess borders
.navbar-default {
border-top: none;
border-left: 0;
border-right: none;
margin-top: 0px;
padding-bottom: 10px;
font-family: 'Open Sans Condensed', sans-serif;
margin-bottom: 0;
font-size: 18px;
border-color: transparent;
white-space: normal;
}
.navbar-default .navbar-nav > li {
margin-top: 20px;
}
Any help would be much appreciated, I have been very confused and stuck on this for several days at least and really want to keep the same navbar without having to make it all over again
After much playing with the code I found that
#media screen and (max-width: 768px) {
#navbar-primary .navbar-nav > li {
display: block;
}
}
gave me the result I wanted (vertically stacked menu items on collapse!)
I have a map and a list under a map. When I scroll I want the map to stay fixed but the list under the map to scroll.
My HTML is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />
<title>Starter Template - Materialize</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="css/leaflet.css" type="text/css" rel="stylesheet" media="screen,projection" />
</head>
<body>
<div class="navbar-fixed ">
<nav class="orange " role="navigation">
<div id="replaceBar" class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Local Market</a>
<ul class="right hide-on-med-and-down left">
<li>Statistics</li>
</ul>
<ul id="nav-mobile" class="side-nav left">
<!-- Statistics Drop Down Start -->
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header"> My Statistics<i class="mdi-navigation-arrow-drop-down right"></i></a>
<div class="collapsible-body">
<ul>
<li>Basic Stats</li>
<li> My Top Breweries</li>
<li>My Top Styles</li>
<li>My Top Tastes</li>
</ul>
</div>
</li>
</ul>
</li>
<!-- Statistics Drop Down End -->
<li>My Lists</li>
<!-- Map Drop Down Start -->
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header">My Maps<i class="mdi-navigation-arrow-drop-down right"></i></a>
<div class="collapsible-body">
<ul>
<li>Breweries Tapped</li>
<li>Breweries Visited</li>
</ul>
</div>
</li>
</ul>
</li>
<!-- Map Drop Down End -->
<!-- Discover Drop Down Start -->
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header">Discover<i class="mdi-navigation-arrow-drop-down right"></i></a>
<div class="collapsible-body">
<ul>
<li>Top Beers</li>
<li>Top Breweries</li>
<li>Top Styles</li>
<li>Top Tastes</li>
</ul>
</div>
</li>
</ul>
</li>
<!-- Discover Drop Down End -->
<!-- Drink Local Drop Down Start -->
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header">Breweries Tapped<i class="mdi-navigation-arrow-drop-down right"></i></a>
<div class="collapsible-body">
<ul>
<li>Top Local Beers</li>
<li>Nearby Breweries</li>
</ul>
</div>
</li>
</ul>
</li>
<!-- Drink Local Drop Down End -->
</ul>
<img style="vertical-align: middle;" src="img/menuIcon.png" height="30" width="30">
<ul id="search" class="right valign-wrapper">
<li class="valign">
<img style="vertical-align: middle;" src="img/searchIcon.png" height="30" width="30">
</li>
</ul>
</div>
</nav>
</div>
<div id="map" style="height: 300px;" style="position:fixed;"></div>
<div id="replace"> </div>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content center">
<div>
<span class="card-title">Searching Stock</span>
</div>
<div id="load" class="preloader-wrapper big active ">
<div class="spinner-layer spinner-yellow-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Well....
#topDivthatNeedstoStay {
width:100%;
top:0;
left:0;
height: $height; // variable replace with actual
position: fixed; // boom
background: $yellow; // variable replace with actual
}
#elementYouwantoScroll {
width:100%;
height:$height; // variable replace with actual
overflow-y:scroll; // scroll
-webkit-overflow-scrolling: touch; // for mobile might as well pop this in as well ;)
}
Something like this seems like it would work (where you set the z-index of the fixed map to a value higher than the rest of the contents):
<div id="map" style="height: 300px; position:fixed; top: 0; left: 0; z-index: 100"></div>
After playing with your live example in Chrome, here was the more specific answer that worked for me:
.navbar-fixed{
height: 10vh;
}
#map{
height: 50vh;
}
#collection{
height: 40vh;
overflow-y: scroll;
margin-top: 0;
margin-bottom: 0;
}
If you add this to your CSS, you should see what you're looking for (if I'm hearing you correctly). Since percentages are defined by forces beyond the size of the viewport when it comes to height, you're going to want to use the unit vh instead. 100vh = the height of the viewport.
In my sample CSS I've made use of the vh to add up to 100. This will make ALL of the 3 elements you have adjust to the full viewport height. Also note the dropping of the margins on the collection; these will add onto the heights and make the height just a little over 100vh, and you'll get some pretty sketch scrolling going on since the page is just barely over the size of the screen. You also may want to play with your .orange height for consistency's sake.
If you want fixed height elements AND responsive height elements, you're going to have to turn to the calc() property in CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/calc). However, if you go this route, get ready for some spotty coverage across browsers. You're probably better off going the vh only route if you want a simple, cross-browser solution. Hope this helps!
I think the answer could be quite simple by adding the css to the map:
position: fixed;
z-index: 10;
The content div ("replace" as I guessed?) could have:
position: relative;
margin-top: 300px;
z-index: 3;
Easier to debug and give an correct with actual content, the link above to live material did not have a map. Could you put up a jsfiddle?