Code:
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<style>
button {
min-height: 32px;
}
</style>
</head>
<body>
<button>Hit Me</button>
</body>
</html>
In Chrome 72, Developer Tools show that the button has a height of 18px only. Why?
New Code:
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<style>
button {
min-height: 32px;
background: lightgray;
}
</style>
</head>
<body>
<button>Hit Me</button>
</body>
</html>
Now the button height becomes 32px.
Why is the button height not honoring min-height without a background set?
Browser issue
First of all, I've made a Fiddle right here where you can try with different things/browsers.
button {
height: 32px;
min-height: 32px;
}
This seems to work.
Is it only you?
No, as remarked here by #Michael_B, it seems to be a "browser thing", not only with min-height but with height and more.
So first you have the W3C standards, which are a set of guidelines for browser makers. And then you have the browser makers, who are free to do whatever they want.
If you also try with a Safari browser it stays with the 18px, but not with Firefox.
I don't exactly know why it works for example setting a background and neither could find it, but in my opinion, with height: 32px; //same as min-height is a "cleaner way" of getting through this.
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<style>
button {
height: 32px; /*Here you should put the min-height value*/
min-height: 32px;
}
</style>
</head>
<body>
<button>Hit Me</button>
</body>
</html>
UPDATE 1
If you want to the button to have dynamic height (let's say 100%) to its parent, just do:
div {
height: 10px;
min-height: 32px;
}
button {
height: 100%;
}
If you see, as the button is height: 100%; to the div (its parent), setting min-height to it will work perfectly and your button could dinamically change its height.
You could also go for:
button {
min-height: 32px;
border: 0;
}
Otherwise please tell your specific case for what you want to achieve.
Hope it helped.
Related
Although a lot of questions have been posted I did not find the answer, so hopefully someone can help.
I have a website which consists of a header and an iframe below it. The iframe's height changes from page to page, sometimes very long, sometimes very small. The iframe must fit the whole width.
I want the height of the iframe to fit the rest of the page (means: the whole page minus the height of the header). I don't care if the iframe is a bit smaller, I am searching for a pixel-exact solution.
Here is a code-example I have generated so far:
<!doctype html>
<html lang="de">
<head>
<style>
header { border: 2px solid blue; }
.iframewrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
border: 2px solid green;
}
.iframewrapper {
padding-top: 40%;
position: relative;
height: 100%;
width: 100%;
border: 2px solid red;
}
</style>
</head>
<body>
<header>
<h1>This is the header.</h1>
<p>Some text.</p>
</header>
<div class="iframewrapper">
<iframe src="iframetest-big.html" frameborder="0" scrolling="yes" />
</div>
</body>
</html>
You can look at it here (or in this css-fiddle, but this is not very figurative because I am not able to embed an iframe-file from an external url).
Now with this code the iframe is either too small (if I have a big window or a small padding-top in the wrapper-class) or to big, causing the appearance of a second scrollbar (if I have a small window or a big padding-top in the wrapper-class). I try to illustrate the situation in this image:
What is the right way to accomplish this?
Flexbox is perfect for that. Just set body to 100vh, set direction to column (so one element under another) and let iframe fill entire flexbox except header space.
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
iframe {
width: 100%;
flex: 1;
border: 0;
min-height: 0; /* just due to very small preview stackoverflow fiddle */
}
<!doctype html>
<html lang="de">
<head>
</head>
<body>
<header>
<h1>This is the header.</h1>
<p>Some text.</p>
</header>
<iframe src="https://en.wikipedia.org/wiki/Stack_Overflow" />
</body>
</html>
I have a problem with my website, I want to have a picture named banner.png in the header, I am supposed to use header and not div, since this is html5.
this is the index.html file
<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<title>Erling's website</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>
This is the stylesheet
header {
background-image: url("img/banner.png");
background-repeat: no-repeat;
height: 15%;
position: absolute;
width: inherit;
}
I do find the picture when inspect element but it looks like the height is not working.
header {
/*DEMO*/background-color: red;
background-image: url("img/banner.png");
background-repeat: no-repeat;
height: 15%;
position: absolute;
width: inherit;
}
<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<title>Erling's website</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>
Question to yourself: 15% of what?
If you use the developer tools of your browser and select the html or body tag from the opened window, you will see that the html and body do not have any height. 15% of 0 = 0, so the header must have a fixed height, for example: 230px, or you can add this style in your CSS file:
Html,body {position:relative;height:100%;}
For the above percentage height to work with your header add
html, body {
height: 100%;
}
Or change the height on the header to padding bottom.
header {
padding-bottom: 30%;
}
The above answer will solve the issue, but if you for any reason want to set the height as % in your header, you need to set the size of the html to 100% so that the header gets 15% of it.
html{
height:100%;
float:left;
}
When you say height: 15%;, You mean the header should take 15% of it's parent. This will have no effect since you haven't set the height of the parent which is the body. You either have to give the body height or else use pixels instead of percentage
header {
height:100px; /*You can specify your size*/
}
You can make use of view units, vh for view height and vw for view width JS Fiddle
header {
height: 15vh; /* represents 15% of the view height, 100vh is 100% of the height*/
I finally found a solution: note that also width was not working
header {
background-color: red; /* red for DEMO */
background-image: url("img/banner.png");
background-repeat: no-repeat;
height: 15%;
position: absolute;
width: inherit;
}
html, body {
height: 100%; /* fix height*/
width: 100%; /* fix width */
margin: 0; /* fix width, or margin: 0 -5px; in header {} */
}
<!-- HTML 5 -->
<!DOCTYPE html>
<html>
<head>
<title>Erling's website</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
</header>
<body>
</body>
</html>
Another Post about this: Percentage Height HTML 5/CSS, it also mentions the use of height: 15vh;
<header> element position in html
It is invalid html to have a <header> element as a child of the <html> element. Your html is not valid accord to HTML5 specs.
You must move the <header> element to be inside the <body> element.
Part of what is happening here is that because the <header> element comes before the <body> element, the document model is forced to create a <body> element to contain <header> so your <body> element is being ignored.
Move your <header> tag to be within <body> and go from there.
Once that is fixed, then you can work on the sizing issue. Because the <body> element has nothing in it, the width will be 0. You can force it to fill the frame by giving body a width of 100% and your header image will work.
body {
width: 100%;
}
If you want the header to be 15% of the height of the visible window then change height to use the vh (viewport height) unit which is a percentage of the height of the visible window.
header {
[...]
height: 15vh;
}
I have a div with a background-color, and a 3 pixel white border.
When I set the html element to direction:rtl and overflow-y: scroll, I get a pixel of the background to the right of the border - only in IE9:
I'm pasting my code here, because on JsFiddle I can't replicate the bug.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
html {
overflow-y: scroll;
direction:rtl;
}
.main {
margin: 0 auto;
width: 960px;
}
.sld-menu-item {
height: 85px;
border: 3px solid #fff;
background-color: #d25188;
}
</style>
</head>
<body>
<div class="main" role="main">
<div class="sld-menu-item sld-menu-item-2">
</div>
</div>
</body>
Has anyone run into this problem, and/or can someone suggest a solution? I can't give up the scroll and rtl rules...
I was only able to fix it by setting overflow: hidden on containing element and doing a negative margin hack:
.main {
overflow: hidden;
}
.sld-menu-item {
margin-right: -1px;
}
You might also want to set width of sld-menu-item to 961px then. Can probably put this in an IE9 conditional statement. I hope there's a better way of solving this though.
I banged my head against the wall for several hours, at the end I solved it in a very strange way...
Change the width of .main to 961px, it seems that Microsoft does not know how to find the "middle" of an even range.
I've been in the industry for many years, however for the last 10 years I haven't had to do much of the HTML myself. I've recently become the only developer at work and as such I have to do all of the HTML myself as well.
Normally this wouldn't be an issue, however I'm trying to stick with the same quality standards that I have for my PHP / MySQL / JavaScript / jQuery work that I do. So tables are definitely out of the question (the last time I had to write HTML/CSS myself was when nested tables was acceptable).
I've been toying around with HTML divs and CSS and I'm having some pretty major issues with it, and not finding much of anything online other than the crap posted at W3Schools doesn't help either.
Let's first take a look at some code I'm working on, here's the HTML:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background: gray;
}
#page_wrapper {
background: yellow;
height: 100%;
width: 100%;
}
#content {
width: 980px;
background: white;
height: 100%;
margin: 0 auto;
}
header {
height: 160px;
width: 980px;
background: blue;
}
#content-wrapper {
background: green;
width: 100%;
}
footer {
height: 120px;
margin-top: -120px;
width: 980px;
background: orange;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Page Title</title>
<link href="inc/css/style.css" rel="stylesheet">
</head>
<body>
<div id="page_wrapper">
<div id="content">
<header>this is the header...</header>
<div id="content-wrapper">sdasd</div>
<footer>
this is the footer
</footer>
</div>
</div>
</body>
</html>
I've attempted several variations of this, and I haven't been able to get it to look the way that it should. Note that I'm using background colors specifically to tell the positioning of everything because this is more of a learning exercise than a real-world example.
Many of the pages that I will have to create will have a background image in the body just like many websites these days. Then the content will be 980 pixels wide. My big problem with the code above, is that the content-wrapper div, needs to be 100% of the available space if the content isn't long enough to push it down.
When I add height: 100% to that declaration in the CSS it seems to render it just fine however it puts it to 100% of the window which makes it overlap the page_wrapper div that contains it.
I'd like to not use overflow declarations at all, as for some reason every time I do it screws everything else up.
So I guess the real question and/or request here would be:
How do I do what I would like to do in the above code?
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background: gray;
}
#page_wrapper {
background: yellow;
height: 100%;
width: 100%;
}
#content {
width: 980px;
background: white;
height: 100%;
margin: 0 auto;
}
header {
height: 160px;
width: 980px;
background: blue;
}
#content-wrapper {
background: green;
height: 100%;
position:relative;
}
footer {
height: 120px;
width: 980px;
background: orange;
position:absolute;
bottom:0;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Page Title</title>
</head>
<body>
<div id="page_wrapper">
<div id="content">
<div id="content-wrapper">
<header>this is the header...</header>
test
<footer>this is the footer</footer>
</div>
</div>
</div>
</body>
</html>
The body tag is already "100% of the available space if the content isn't long enough to push it down."
So just use that element for anything you need (background images, etc). Take a look at CSS properties such as background-position to control where something is visible inside the <body> tag.
Otherwise, I would go for min-height: 100%; on the wrapper but am not sure how compatible that is with older versions of IE. And it may or may not do funky things on a touchscreen devices.
In general however, HTML is not very good at vertical layout. Especially in relation to the browser window's height. Most of the issues can be worked around in modern browsers, but it's better to simply accept this constraint and design your website around the assumption that you have no control over the height. It's just not worth the headache.
You don't need the page wrapper or content div. You can just set the body width to 980px. You can also set your html and body to whatever color you want.
While W3Schools has gotten a deservedly bad rap, they've cleaned up quite a bit and aren't a bad, quick reference.
I am trying to position a div (footer) element at the bottom of a printed page. In firefox this is working fine and the div will sit along the bottom of the printed page.
However, in Safari the footer moves up the printed page if the browser window is not very tall. eg. if the browser window is 200px tall then the footer sits on the print out about 200px down. If the browser is 400px tall it draws the footer 400px down the page.
I would like to get the same behaviour in Safari as I can get in Firefox if possible?
The basic code I am using for this is:
<html>
<head>
<title>Print footer at bottom of a printed page</title>
<style type="text/css">
* { margin:0; padding:0; }
html, body { height: 100% !important; }
#footer { height:25px; border-top:solid 1px #000;
position:absolute; bottom:0; }
</style>
</head>
<body>
<p>Some content on the page here</p>
<div id="footer">This should appear at the very bottom of the printed page</div>
</body>
</html>
Edit: I'm happy if the solution requires a hack...it only needs to work in Safari
I just printed this out in Chrome (same rendering engine as Safari), and the line showed at the bottom...
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<style type="text/css" media="print">
html, body { margin: 0; padding: 0; }
body { height: 11in; width: 8.5in; }
#footer { position: absolute; bottom: 0; }
</style>
</head>
<body>
<div id="footer">
This will always print at the bottom
</div>
</body>
</html>
Notice that I have media="print" on the style tag. For more on this, read Going to Print on ALA.
This is the code i use. Note I am setting both html and body height to 100% which is needed for Chrome and Safari.
#media print {
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#footer {
position: absolute;
bottom: 0;
}
}
Have you tried this version?
http://www.themaninblue.com/experiment/footerStickAlt/
I know it works in browsers, but not sure about print.