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>
Related
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%;
}
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>
I thought I had CSS floats figured out but apparently I don't because I can't figure out why this page is behaving the way it is. I'd like for the photo and status divs to each take up 50% of the screen such that both of them appear on the same line and that line takes up 100% of the screen. But what is happening is that the "Stats" div renders below the "Photos" div. The only way I can get them to render on the same line is to reduce their respective widths to 49% (or lower) but then there's a slight gap between the right edge of "Stats" and the edge of the screen. There's something that's taking up additional room but I don't know what it is and I don't see anything in Chrome's Dev Tools. By the way, reset.css is just Meyer's reset.
Thanks.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../../reset.css" />
<link rel="stylesheet" href="base.css" />
</head>
<body>
<div class="content-main">
<div class="photos">Photos</div>
<div class="stats">Stats</div>
</div>
</body>
</html>
base.css
.content-main {
width: 100%;
}
.photos {
float: left;
width: 50%;
background: #cf6;
}
.stats {
float: left;
width: 50%;
background: #bbb;
}
I found my error. If add additional padding to each of the elements, that creates the problem. I left that out of my question so that code shown above will work. My bad.
I cannot seem to remove the spacing between the top of the page and the <div> in this example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
<style type="text/css">
html, body{
padding: 0;
margin: 0;
}
#container{
background-color: #808080;
}
</style>
</head>
<body>
<div id="container">
<div id="inner-container">
<h3>Index</h3>
</div>
</div>
</body>
</html>
I have narrowed it down to this line:
<!DOCTYPE html>
It seems removing this aligns the <div> to the top of the page. I can't see a way in CSS to achieve the same thing.
remove the margin from your <h3> as well
h3 { margin-top: 0 }
DEMO
Margins collapse into each other.
The top margin of html (0), body (0), #container (0), and h3 (not 0) merge into a combined non-zero top margin between the first content and the edge of the window.
Set h3 { margin-top: 0 } to remove it.
(Although you should start your document with a heading (h1) not a sub-sub-heading (h3).)
Actually Default Margin Of H1 to H6 is the problem you are facing so overriding this value will solve your problem.
h3 { margin-top: 0;margin-bottom: 0; }
Extra Info:
You also might want to look into using a CSS reset script before starting a project so you don't have to worry about little things like this.
I have the following code which, as expected, shows a grey rectangle in both Firefox and IE. As soon as I add a DOCTYPE (HTML 4.01 Transitional) in front, it shows only a blank page. The online validator says the document is OK. What is wrong? Should I care about DOCTYPE?
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
#gallery
{
width:750;
height:548;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="gallery">
</div>
</body>
</html>
You need to specify the units for your width and height. I assume you're going for pixels so:
#gallery
{
width: 750px;
height: 548px;
background-color: #f0f0f0;
}
You haven't specified the units of measure for the height and width attributes in your CSS. Without a DOCTYPE the browser will attempt to render the page as best it can (QUIRKS mode), in your case I think it probably guessed the correct units. By adding the DOCTYPE you have told the browser to follow a very specific set of instructions when rendering the page - no guessing that you wanted pixels instead of percents.
Your CSS was buggy.
width:750px; /* PX!! */
height:548px; /* PX!! */
Then add the doctype.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
#gallery
{
width:750px;
height:548px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="gallery">
</div>
</body>
</html>
The definition of height and width should be in pixels, em's or percentages, e.g:
width: 750px;
height: 548px;