Hii,
I am using .net 2008. When i designing the page in HTML, i have given the height of the outer table to 100%, but it is not taking to the full height of the window
It's not so simple with 100% height.
Why Percentage Height Fails
Okay, to begin, maybe I should explain
exactly why 100% height fails.
Contrary to popular opinion, it is not
because the browser ignores the
invalid HEIGHT attribute. The real
reason it fails is that the browser
does not expand the HTML and/or BODY
(depending on the browser) to fill the
browser viewport. The browser is in
almost all cases, in fact, rendering
the table as 100% high. The problem is
that it is 100% of the containing
element (HTML and BODY), which may not
be as high as the browser's veiwport.
The HTML and BODY tags represent block
elements that automatically expand to
fill the width of their container,
which is the browser's viewport. They
do not expand vertically. That can be
fixed.
This article will help you with your table: http://apptools.com/examples/tableheight.php
Add this to your CSS:
html, body {
min-height: 100%;
}
Related
Well this is an odd behaviour.
I'm coding the frontend of a metrics app that must be viewed in a large tv.
I use Html, Js and Css (bootstrap 4).
It's for general public so we must hide browser tabs, etc..
Whenever I set the browser to go fullscreen, a big white row appears at the bottom of the page. Please see attached picture.
The odd part is that there isn't any element there. It's like the viewport just gets bigger and forgets to cover the bottom with stuff.
Is this a known issue?
How to avoid this and cover on fullscreen?
I'ver tried auto, cover, 100% height, etc..
I found the solution right after posting my question.
html,body
{
min-height:100%;
}
The thing is that if you apply height only to body, it will seek for the parent (html) and found that the size is the same as before so both must have the property in order to get the 100% of the height.
I am trying to make a website with a fluid layout. So to do this I am trying to use percentages as measurements. If I am not mistaken, the percentages are calculated from the parent element. Since the html tags does not have any set width, how does the body tag calculate 100% width? does 100% means the full resolution of the screen that you are viewing the page?
thanks
You have to read the specs to find the answer to your question:
https://www.w3.org/TR/CSS22/visudet.html#x3 says about percentage widths:
<percentage>
Specifies a percentage width. The percentage is
calculated with respect to the width of the generated box's containing
block.
About containing blocks:
https://www.w3.org/TR/CSS22/visudet.html#containing-block-details says:
The position and size of an element's box(es) are sometimes calculated
relative to a certain rectangle, called the containing block of the
element. The containing block of an element is defined as follows:
The containing block in which the root element lives is a rectangle
called the initial containing block. For continuous media, it has the
dimensions of the viewport and is anchored at the canvas origin;
(...)
The root element is <html> (https://www.w3.org/TR/html-markup/html.html).
The screen is considered a continuous media.
The relationship between viewport and canvas is simple:
https://www.w3.org/TR/CSS22/visuren.html#viewport
https://www.w3.org/TR/CSS22/intro.html#canvas
User agents for continuous media generally offer users a viewport (a
window or other viewing area on the screen) through which users
consult a document. User agents may change the document's layout when
the viewport is resized (see the initial containing block).
When the viewport is smaller than the area of the canvas on which the
document is rendered, the user agent should offer a scrolling
mechanism.
So, trying to simplify this, the canvas size considers the content size even if it doesn't fit on the browser window.
The browser window contains the viewport (considered without menus, scrolling bar and status bar).
So, if <body> has 100% width, that means it would be the same width as the <html> element, which width is equal to the viewport's width.
You can easily find the viewport width by inspecting the css for <html> element on Chrome.
100% width for the body tag means 100% of the html width, which again is the full width of the viewport, which on desktops will be the browser window, on mobile devices the screen width.
Using just HTML and CSS would not suffice to get the width, you would need to use Javascript, or even better, a framework like jQuery that would help you get the body's width.
Using jquery the code would look something like this:
$(document).width();
You can find out more about it here.
I currently have a website where I'd like the main body portion of the page and footer (below the header image and navigation bar) to always take up the available view space, but to expand below this if there's more content. I've been setting min-height of my container of class mainbody to a calc() function. The HTML and CSS have been tested and behave correctly in Safari and Chromium, however it fails to behave as intended on Firefox. The problem is most apparent on the Alumni page, which has no content at the moment, and also occurs on the Media page on a large enough screen . Is there anything I'm doing wrong?
100% height means 100% of the height of the content. To be honest, I don't know why it works in chromium and not in firefox.
What you need is 100% of the viewport. There are cool vw and vh units for that. (See availability.).
If you change min-height to min-height: calc(100vh - 268px) !important;, it will work.
If you want old style solution, you can google 100% height css, e.g. enter link description here
P.S.: Also fix your CSS.
I do not understand the basic concept of giving body and html a height of 100%. Why do we give 100% to our parent?
<body style="height:100%"> and the <html style="height:100%">.
What happens when I give 100% height to my html and body, and why do we give it?
Giving 100% height to body and html isn't an must-do. But assuming you want to use percentage values on your site you have to assign 100% height to both.
Why?
Refering to Mozilla Developer Network:
Many CSS properties can take percentage values, often to define sizes in terms of parent objects.
That means: If you assign height:20% to header (assuming html>body>header), the browser will calculate that 20% in terms of the parent (body) and the height of the body in terms of its parent (html).
But height has an initial value of auto. When you take a look into the Developer Tools of Chrome etc., you'll see that the body has a calculated height of 0 (zero) by default. Consequently the headers height isn't calculated correctly.
That's why it makes sense to define a line like the following in a reset.css or something alike:
html,
body {
height:100%;
width:100%;
}
Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have it's height set as well.
However the content of body will probably need to change dynamically. Setting min-height to 100% will accomplish this goal.
Look here
Make body have 100% of the browser height
I'm looking to construct min-height: 100% sections and it seems the general consensus is :
html{
height: 100%;
}
body {
min-height: 100%;
}
and direct children have min-height: 100% as well. The problem I can't wrap my head around is if HTML has fixed height 100% while body may be allowed to grow, hasn't it shot out of the page and the document is not very semantic, i.e. html < body. Also, if your section is wrapped up in several other divs, all parents will require min-height: 100% as well. This seems a little unconventional.
What would be the most elegant approach to it? I know height:100vh is the best approach if it were supported by all browsers. Would it be better to use javascript to obtain the viewport and set all interested sections' height property?
The "unconventional" issue is actually very true and conventional. You see, browsers only calculate "horizontal" layout, not vertical unless explicitly set. So if you want an item to have a height of 100%, then you'll need to set some height explicitly to all it's ancestors so that the browser can calculate the dimensions.