On a page styled with Twitter Bootstrap and using the navbar I wanted to fill the whole container below the navigation bar with a Google Maps map. To accomplish that I have added the CSS following below.
I define for the html and body elements the sizes to 100% so that this is used for the map's size definition. This solution, however, yields one problem:
The map's height is now the same as the whole page height, which results in a scroll bar which I can scroll for the 40px the navigation bar adds. How can I set the size of the map to 100% - 40px of the navigation bar?
#map {
height: 100%;
width: 100%;
}
#map img {
max-width: none;
}
html, body {
height: 100%;
width: 100%;
}
.fill {
height: 100%;
width: 100%;
}
.navbar {
margin-bottom: 0;
}
For completeness the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/core.css">
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
</div>
</div>
<div class="container fill">
<div id="map">
</div>
</div>
</body>
</html>
You could solve the problem with absolute positioning.
.fill {
top: 40px;
left: 0;
right: 0;
bottom: 0;
position: absolute;
width: auto;
height: auto;
}
Demo (jsfiddle)
You could also make the navbar .navbar-fixed-top and somehow add a padding or margin inside the #map element.
Related
I'd like to set the div height using percentages that do not depend on items in it.
I got a fixed header on the top of the screen and a centered div. But set height in percentages does not work. It enlarges only if I add some items in there.
Please help.
I have this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lol</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="conteiner">
<header>
<p>header</p>
</header>
<div id="main">
<p>main info</p>
</div>
</div>
</body>
</html>
And this CSS.
html{
width: 100%;
height: 100%;
}
body{
overflow: hidden;
margin: 0;
width: 100%;
height: 100%;
}
header{
position: fixed;
top: 0px;
width: 100%;
height: 10%;
border: solid red 1px;
}
#main{
display: block;
width: 65%;
height: 80%;
border: solid green 1px;
margin: 8% auto 0 auto;
}
You forgot to make it's parent 100% height too.
#conteiner has automatic height by default because its div block. And default height is height of its children. If parent's height isn't set manually, children height in percents are ignoring by browser
#conteiner {
height: 100%;
}
at your style file you have to write style for container div code like
#container{
height:100%;
}
I am trying create a simple single page site that works on mobile. Ideally, I'd like each section of the site to be 100% of the browser height. This is the page:
http://codepen.io/juanp83/pen/EgjBwK
and here's the code:
body, html {
height: 100%;
width: 100%;
}
.section {
height: 100%;
position: relative;
}
.one, .three {
background-color: #666;
}
.two {
background-color: #222;
}
.bottom {
position: absolute;
bottom: 20px;
right: 0px;
left: 0px;
}
p {
color: #fff;
text-align: center;
}
.nav {
position: fixed;
top: 0px;
height: 50px;
width: 100%;
background-color: #fff;
z-index: 1;
}
<!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="reset.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<!--nav-->
<div class="nav"></div>
<!--Section1-->
<div class="section one">
<div class ="bottom"><p>By Juan Portillo</p></div>
</div>
<!--Section2-->
<div class="section two">
</div>
<!--Section3-->
<div class="section three">
</div>
</body>
</html>
It works great on my desktop. But I tried it on my iPhone and the first section takes up the entire height of the webpage, not just the height of the browser, so it ends up "hiding" the other sections.
I've done several searches here on stack overflow as well as some other sites but I just can't find a fix. Any help would be greatly appreciated.
.section {
height: 100vh;
}
Set the height to your viewport height using vh.
Reference: https://snook.ca/archives/html_and_css/vm-vh-units
height: 100vh
that should do the trick
vh = viewport height
The HTML is dead simple and I'm looking to add as few <div>s as possible as they make code readability a headache.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=720, user-scalable=yes" />
<title>SharpCraft</title>
<!-- Stylesheets -->
<noscript>
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!-- jQuery -->
<script>
</script>
</head>
<body>
<!-- #main -->
<main id="main">
<!-- #content -->
<div id="content">
</div>
</main>
</body>
</html>
Regrettably my "style" of CSS development is guess and check so I've mutilated my stylesheet beyond repair. All I know for certain is that the content div should follow the following rules:
#content {
background: url("https://raw.githubusercontent.com/brianjenkins94/SharpCraft/master/SharpCraft/Assets/graphics/ui/Menu_background_with_title.png") no-repeat;
min-width: 640px;
min-height: 480px;
display: table;
}
With the end product resembling the following:
There are many ways to center an element horizontally and vertically, but I would suggest the CSS table approach, as you're doing it on the main content area, so we need to ensure the scroll bars to work properly when the window size is rather small.
html, body, #table {
height: 100%;
}
body {
background: black;
margin: 0;
}
#table {
display: table;
width: 100%;
}
#main {
display: table-cell;
vertical-align: middle;
}
#content {
background: url("http://goo.gl/TVjkjW");
width: 640px;
height: 480px;
margin: 0 auto;
}
<div id="table">
<div id="main">
<div id="content"></div>
</div>
</div>
JSFiddle: http://jsfiddle.net/ykato61n/
(I adjusted the markup slightly to make it work)
Heres a pure CSS solution, it makes use of the transform and translate function from CSS3. It uses minimal HTML and CSS. I've put the content div's background to red, just incase the image disappears for some reason.
#wrap {
color: #fff;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: scale(2, 3);
/* Safari */
transform: scale(2, 3);
-webkit-transform: translate(-50%, -50%);
/* Safari */
transform: translate(-50%, -50%);
/* Safari */
background: red url("https://raw.githubusercontent.com/brianjenkins94/SharpCraft/master/SharpCraft/Assets/graphics/ui/Menu_background_with_title.png") no-repeat;
background-size: cover;
background-position: center center;
width: 90%;
padding-bottom: 67.50%;
/* sorts out aspect ratio*/
}
body {
background: #000;
}
#content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-width: 640px;
min-height: 480px;
/*background:blue;*/
display: table;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="wrap">
<div id="content">content</div>
</div>
</body>
</html>
I'm not sure why you wanted the content div to have display: table;, but have put it in for good measure.
I have created a code snippet to try and demonstrate what I am trying to achieve. (I have tried to make it as simple as possible)
<!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">
<title>Fixed Top Navbar and "drawer" content area</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Custom styles for this template -->
<style>
#fixed-panel-top {
position: fixed;
top: 0;
right: 0;
left: 0;
width: 800px;
margin-left: auto;
margin-right: auto;
}
.custom-navbar-example {
height: 40px;
background-color: yellow;
z-index: 1030;
}
.fixed-content-top {
height: 200px;
background-color: blue;
z-index: 1;
}
.relative-content {
width: 800px;
margin-top: 300px;
height:1000px;
background-color: red;
z-index: 1020;
}
</style>
</head>
<body>
<!-- Fixed navbar -->
<div id="fixed-panel-top">
<!-- Navbar -->
<div class="custom-navbar-example"></div>
<!-- Top fixed content area -->
<div class="fixed-content-top">
</div>
</div>
<div class="container relative-content">
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
The yellow div represents a fixed top navbar, the blue div represents the fixed top content area below the navbar and the red div represents the "rest of the page content" which will be relative.
The desired effect is that as you scroll down, the red div will appear over the top of the blue div, but under the yellow div. This will give the effect of the blue div being a "drawer" of content that can be hidden by the red div. I have already tried representing this using z-index but to no avail.
Can anyone point me in the right direction or solve it?
EDIT: Clarifications
I am wanting the yellow and blue div to be both fixed. The illusion I am trying to achieve is the red div scrolls up over the blue div. If the blue div contained an image, the image would stay static while the red div scrolled up to hide it.
Here following is the output what you want. position:relative do the trick.
#fixed-panel-top {
position: fixed;
top: 0;
right: 0;
left: 0;
width: 800px;
margin-left: auto;
margin-right: auto;
}
.custom-navbar-example {
height: 40px;
background-color: yellow;
z-index: 1030;
position: relative;
}
.fixed-content-top {
height: 200px;
background-color: blue;
z-index: 1;
}
.relative-content {
width: 800px;
margin-top: 300px;
height:1000px;
background-color: red;
z-index: 10;
position: relative;
}
<div id="fixed-panel-top">
<!-- Navbar -->
<div class="custom-navbar-example"></div>
<!-- Top fixed content area -->
<div class="fixed-content-top">
</div>
</div>
<div class="container relative-content">
</div>
Check Fiddle Here.
Hope it helps.
Edit:
In chrome can't able to overrule the parent z-index. Check Reference Link
Update:
For fixed in chrome you have to make changes in HTML.
Check Updated Fiddle Here.
I am trying to position an image to be at the top of the page and stretching to both sides of the page with a height of 51px. However, there is a gap between the image and the top of the page and both sides of the page. Please can you tell me what I am doing wrong?
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
#twitter {
background: url(http://maxk.me/test/img/twitterbg.png) repeat;
height: 51px;
width: 100%;
position: fixed;
}
HTML
<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="background">
<img src="...." class="stretch" alt="" />
</div>
<div id="twitter">
</div>
</body>
</html>
You need to remove the default margin on body:
html, body {
margin: 0;
padding: 0
}
You should also add a valid doctype as the very first line:
<!DOCTYPE html>
Without this, your page will be very broken in Internet Explorer, and generally inconsistent between different browsers.