Problem
I am having an issue with getting the height of a responsive content box to fill the screen vertically. everything including widths adjust fine to resizing in Dev Tools however when I adjust the content box height in the CSS code, I am only able to enter static heights in px (483 in code below). When I try to set the height to 100%, my google map which is in the content box, disappears. The map resizes fine as I manually adjust the content box contenta height so that seems to be functioning properly. I have the meta tag as
<meta content="width=device-width, height=device-height, initial-scale=1.0" charset="utf-8">
Searching other questions hasn't resulted in any solutions.
Question
Is there coding that I am missing that allows the responsive content box to fill vertically?
working test page
CSS
body {
font-family: Arial, Helvetica, sans-serif;
width: 99%;
height:100%;
background-color: #52669c;
}
#map {
width:100%;
height:100%;
border-radius: 15px;
}
#contenta {
float: left;
background: #0099ff;
width: 95%;
height: 483px;
}
#rightcolumn {
background: #FFFFFF;
width: 2%;
float: left;
}
Use this template in your html for full width and full height
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://saltwx.com/css/responsive.css">
<title>My website</title>
<!--
rest of your <head>
-->
</head>
<body>
<div class="page-wrapper">
<!--
rest of your <body>
-->
</div>
</body>
</html>
with this css
html, body, .page-wrapper {
margin: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
.page-wrapper {
min-height: 100%;
}
Related
I would like to convert a rectangular image to a square image, but without losing information about the original image. My idea was to create a square image, then I would blur it and I would overlay the rectangular image on it, so something similar:
All this should use HTML+CSS only. To do this, I use Photoshop right now but a way to replicate this behavior using CSS would be amazing because it would save me a lot of time.
I don't have any idea how to do that because the main problem is that the rectangular image should have the same height (or width, if width > height) as the square blurred image and it should be responsive (so no fixed size, it depends on the size of the original image).
HTML
<!-- index.html -->
<!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>Image Box</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Image Box</h1>
<div class="image-box"></div>
</body>
</html>
CSS
/* style.css */
.image-box {
padding-bottom: 100%;
position: relative;
background-image: url(image.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.image-box::before,
.image-box::after {
width: 100%;
height: 100%;
content: "";
position: absolute;
}
.image-box::before {
backdrop-filter: blur(10px) brightness(0.8);
}
.image-box::after {
background-image: inherit;
background-size: contain;
background-position: inherit;
background-repeat: inherit;
}
it will surely be a trivial problem but I have been hitting my head for a long time.
The problem is simple, that is: I have an area with specific dimensions (450x800px) that I would like to always fit the height of the screen.
I am attaching here the sample code I am working on, thank you very much to those who can help me!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="height=device-height, initial-scale=1.0">
<title>Page Title</title>
<style>
html, body { height: 100%; margin: 0;}
.full-height { height: 100%; background: yellow;}
</style>
</head>
<body>
<div class="full-height">
<div style="width:450px; height:800px; margin-left:auto; margin-right:auto; background-color:#FD0F13">I am a DIV that will stretch to fit the whole width and height of the browser window!</div>
</div>
</body> </html>
I created a simple example to showcase the idea of having an absolutely positioned element with left and right set to 0 but with very different results in latest Chrome and Safari.
Based on the comments to this question and this answer, I would think it would work consistently based on how it's outlined in the CSS spec, but it doesn't. Why is this the case?
I'm aware that setting a specific width will resolve, but 1) why the difference cross-browser, and 2) is there a better way to center than specifying explicit width?
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.vis {
width: 100%;
position: relative;
}
.btn {
position: absolute;
left: 0;
right: 0;
margin:auto;
display:block;
}
</style>
<title>Document</title>
</head>
<body>
<div class="vis">
<button class="btn">Test!</button>
</div>
</body>
</html>
Safari:
Chrome:
Surprisingly (at least to me), when I use the ipad emulator in Chrome, I see a very different layout than when I launch my iPad webapp:
- in chrome : screenshot of chrome version
- on my ipad : screnshot of ipad version
The background resolution is 2732x2048.
images and fonts absolutely don't have the same size
the bottom selectors, which are absoluted position with bottom:0 won't end up at the same location
a few background lines are missing on the bottom part of the ipad version
the page html is as follows:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="user-scalable=no, width=device-width">
<style>
body {position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
background-image: url('images/rl-background-grid.jpg');
background-repeat: no-repeat;
background-size: cover;}
.navigation {bottom: 0px;
height: 100px;
position: absolute;
width: 100%;
box-sizing: border-box;
font-size: 18px;
color: #000000;}
</style>
</head>
<body>
<div class="navigation">
This is a test
</div>
</body>
</html>
You can find the actual page here :
http://rl.manuelracim.com/test/test.html
Am I missing something obvious in my header? Or is it a problem that all my CSS rules are expressed in px?
Any pointer/help appreciated!
Thanks
If I try to center my page by adding the following style rule
html, body {
margin: 0 auto;
width: 900px;
}
Flot works well on FireFox and Chrome, but on IE 11, when I select area on the screen, the yellow-marked-selected-area is not the same as the mouse-selected-area.
How can I solve it?
To reproduce: take Flot selection sample - http://www.flotcharts.org/flot/examples/zooming/index.html
and add the style rule for centering.
have you try by centering .container instead of html and body ?
form example
CSS
html,body {
margin:0;
padding:0;
}
.container {
margin: 0 auto;
width: 900px;
}
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document Title</title>
</head>
<body>
<div class="container">
<!--your element place here-->
</div>
</body>
</html>