I'm trying to display google maps and every time I use this
<div class="large-12 columns" id="map-canvas"></div>
The map is showing.It is working as it should.
but when I put this div in a "row" class
<div class="row">
<div class="large-12 columns" id="map-canvas"></div>
</div>
the map disappears.
This is the css
html{
height: 100%;
}
body{
height: 100%;
}
#map-canvas{
height: 100%;
}
height:100% will only work if parent's height is explicitly defined or if all the parents have height 100% till html tag.
Related
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 3 months ago.
I expected <div style="height:50%;background-color:cyan;" to draw a blue box on the screen. But it doesn't. Only the area I fill with characters becomes blue.
So how I do draw a colored box of say 33% of the visible height of the parent?
I seem to remember it actually working at some time, but I cannot remember how it was done.
Poul
<html>
<style>
.worksOK {
background-color: cyan;
}
.DoesntWork {
background-color: lightblue;
}
</style>
<body>
<h1>Height % doesn't seem to work</h1>
<div class = "worksOK" style="height:75px;">
A fixed height, like <b>height:50px;</b> works fine
</div>
<div class = "DoesntWork" style="height:75%;">
But a height in percentage, like <b>height:50%;</b> doesn't seem to work.
</div>
<br>It does however work in this demo:w3schools<br><br>Unfortunately I cannot access the css code, so I do not understand why that is.<br>
And I cannot recall ever have been able to make height work with a percentage.
</body>
</html>```
add a height for the container, for example, here I am adding 100vh (the viewport height) to the body
body {
height: 100vh;
}
.perc50 {
height: 50%;
background: aliceblue;
}
.a {
background: teal;
}
.b {
background: red;
}
<body>
<div class="perc50"> content</div>
<div class="perc50 a"> content</div>
<div class="perc50 b"> content</div>
</body>
I'm working on a website, where the structure of a section is like this:
<div class="col-md-6">
<section class="right" data-type="background" data-speed="30" style="background: url(<?php echo get_field('book_image')['url']; ?>);">
</section>
</div>
The parent div in this situation has (in safari) a height 2976px. However, the child won't size itself to the same height, even though I've applied the height property to it.
I tried this in Chrome & Safari, both on macOS: Chrome worked, Safari didn't.
Is there any was to get this to work, preferably without any JS? Thanks :)
-- Edit
I'm using Bootstrap4, however, the right class only contains properties to style the div. Contents below
.right {
max-width: 50vw;
height: 100%;
background-size: 60vh !important;
background-repeat: no-repeat;
}
-- Edit #2.
Here's a snippet demonstrating the problem:
.left {
padding: 0;
background: #000; /*debugging*/
height: 200px; /*debugging*/
}
.right {
height: 100%;
background-size: 60vh !important;
background-repeat: no-repeat;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-6 left">
</div>
<div class="col-6">
<section class="right" data-type="background" data-speed="30" style="background: red;"></section>
</div>
</div>
</div>
(or in JSFiddle: Click me
As an advice you can use webpage CANIUSE
,you can check which css property does browser support . In my opnion the best solution is to use jquery or javascript to set height of div , when page will be resize or will be load. You can't find absolute perfect solution to solve crossbrowser support . If you need help with jquery do not hesitate ask when you need .
The problem is your parent div doesn't have an height property. Even though Chrome is able to resolve the containers height, Safari (and maybe some other browsers) isn't. In order to fix this you've to specify a height for the 2nd div in your .row (the parent of .right) as well.
Styling
.right-parent {
height: 200px;
}
Markup
<div class="col-6 right-parent">
<section class="right" data-type="background" data-speed="30" style="background: red;"></section>
</div>
Demo
I have set the google map to have a height of 85%. If the window is big enough it will have the proper size. But if the window is small it overlaps somehow.
Here some images
When window is big enough:
When window is smaller (no gray border at the bottom):
Some of the code. I use Bootstrap 3
HTML:
<div class="row full-height">
<div class="col-md-12 full-height">
<div class="map-container">
{{> googleMap name="map" options=mapOptions}}
</div>
</div>
</div>
CSS:
html, body, section, .mainpanel, .contentpanel { height: 100%; }
.full-height {
height: 100%;
}
.map-container {
width: 100%;
height: 85%;
position: relative;
}
I wish it would resize properly so it does not overlap.
Any help would be appreciated.
To achieve the effect you are after, you either must use JavaScript to size/resize the map div or use CSS positioning techniques.
Setting height: 100% for <div> .ui in the HTML below does not work even though all the parent elements have height set to 100%.
Could this be because I'm using <core-header-panel>? I checked its code but I don't see anything that would override the height.
Could this be due to using the layout horizontal attributes?
The layout attributes (built on top of CSS Flexbox) and core-header-panel are part of Polymer.
This is the HTML (simplified):
<!doctype html>
<html>
<body unresolved>
<core-header-panel>
<div layout horizontal class="container">
<div class="ui"> </div> <!-- this does not take up 100% of
the height -->
<div flex class="items"> </div> <!-- this has content inside it which fills
the height, but the <div> itself doesn't -->
And this is my CSS (simplified):
html, body {
height: 100%;
}
core-header-panel {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.container {
width: 100%;
height: 100%;
}
.ui {
height: 100%;
position: relative;
margin: 30px;
}
.items {
display: inline-block;
height: 100%;
margin: 30px;
}
Any help would be appreciated.
EDIT 1: Using DevTools I noticed that <core-header-panel> does take up 100% of the height, but <div> .container does not. height: 100%; is not crossed out for .container in the "Styles" tab in DevTools.
EDIT 2: INFO ON POLYMER Here is a link to a simple explanation of Polymer layout attributes and here is a link to some information on core header panel. There are Github links on the top right of both pages.
The solution was actually really simple.
I had to add fullbleed vertical layout to <core-header-panel>. fullbleed forces it to take up the entire height of the parent. I didn't see a reason for this since I specified height: 100%, but it appears that it does not work without it.
I also added fit to <div> .container to make it fit the parent.
<!doctype html>
<html>
<body unresolved>
<core-header-panel fullbleed vertical layout> <!-- added "fullbleed vertical layout" here -->
<div fit layout horizontal class="container"> <!-- added "fit" here -->
<div class="ui"> </div>
<div flex class="items"> </div>
I have the following simple HTML and CSS:
<html>
<head>
<title></title>
</head>
<body>
<div style="width: 970px;">Text area</div>
<div style="height: 20px; background-color:gray; width: 100%; "></div>
</body>
</html>
I load this page in a browser. If the width of the browser is 400px (just an example), then I see a horizontal scroll bar in the browser screen bottom. If I move the scroll bar to the right, I can see that the background of the second div does not extend to the right.
I hope that the background color of the second div can extend from browser's left edge to the right edge (no matter what the width of the browser is).
How can I fix this?
Thanks!
You can solve like this:
<div style="width: 970px">
<div>Text area</div>
<div style="height: 20px; background-color:gray; width: 100%;"></div>
</div>
Whenever an element's explicitly set width is larger than the width of the body, the element overflows the body's boundaries. In other words, the browser will not adjust the width of the body, thereby restructuring an entire page layout, because one element spills over.
One solution is to make the div that follows the first div overflow as well.
Here's HTML:
<body>
<div>Text area</div>
<div></div>
</body>
CSS:
body > div:first-of-type {
width: 970px;
outline: 1px solid red;
}
body > div:last-of-type {
width: 100%;
height: 20px;
background-color: gray;
}
#media screen and (max-width: 970px) {
body > div:nth-of-type(2) {
width: 970px;
}
}
And, here's a fiddle: http://jsfiddle.net/8mK7f/.
I would suggest making sure the browser default CSS isn't interfering by using a CSS reset. http://meyerweb.com/eric/tools/css/reset/
This is because the body tag's width is the width of your browser window, and the 100% width on the second div is taking the width of the parent, which is the body tag. In your example this means the second div will only ever be 400px (the width of the browser window).
You'll have to set the width of the body tag to also be 970px in order for this to work. Setting body to 100% width won't solve it, because that will take 100% of it's parent width which is the html tag and will still be the width of the browser window.
<body style="width: 970px;">
<div style="width: 970px;">Text area</div>
<div style="height: 20px; background-color:gray; width: 100%; "></div>
</body>
EDIT: An alternative is to set the body to have display: inline-block which will force it to expand to the width of it's children:
<body style="display:inline-block">
<div style="width: 970px;">Text area</div>
<div style="height: 20px; background-color:gray; width: 100%; "></div>
</body>
When you use percentages in CSS, it only extends to the % of the parent element. In this example, make sure that the body element is 100% width as well.
Best of luck :)
Since you are hard coding the widths why not just set the width of the gray bar to the same as the div >Text Area< ?
e.g
<div style="width: 970px;">Text area</div>
<div style="height: 20px; background-color:gray; width: 970px; "></div>