&lt;html&gt;     &lt;head&gt;         &lt;style&gt;                html,body,#root,.app-container {                 height:100%;             }               .navBar {                   height:50px;               }         &lt;/style&gt;     &lt;/head&gt;     &lt;body&gt;         &lt;div id=&quot;root&quot;&gt;             &lt;div className=&quot;navBar&quot;&gt;             &lt;/div&gt;             &lt;div className=&quot;app-container&quot;&gt;             &lt;/div&gt;           &lt;/div&gt;     &lt;/body&gt; &lt;/html&gt;  Despite root is having 100%, scroll is coming initially when you visit to page first time. I have tried by making root height as 100% and app-container height to calc(100%-50px) In this case scroll is still appearing root height as 100% and app-container height to 96%   In this case scroll is appearing and app-container is not taking entire height of page i.e., it is not taking height till bottom which is not correct root height as 96% and app-container height to 100%   in this case scroll is disappearing but app-container is not taking entire height of page i.e., it is not taking height till bottom which is not correct please let me know how to remove unwanted scroll and app-container to take page height till bottom correctly
571
I am working on a web application where I want the content to fill the height of the entire screen.  The page has a header, which contains a logo, and account information. This could be an arbitrary height. I want the content div to fill the rest of the page to the bottom.  I have a header div and a content div. At the moment I am using a table for the layout like so:  CSS and HTML    #page {     height: 100%; width: 100% }  #tdcontent {     height: 100%; }  #content {     overflow: auto; /* or overflow: hidden; */ } &lt;table id="page"&gt;     &lt;tr&gt;         &lt;td id="tdheader"&gt;             &lt;div id="header"&gt;...&lt;/div&gt;         &lt;/td&gt;     &lt;/tr&gt;     &lt;tr&gt;         &lt;td id="tdcontent"&gt;             &lt;div id="content"&gt;...&lt;/div&gt;         &lt;/td&gt;     &lt;/tr&gt; &lt;/table&gt;     The entire height of the page is filled, and no scrolling is required.  For anything inside the content div, setting top: 0; will put it right underneath the header. Sometimes the content will be a real table, with its height set to 100%. Putting header inside content will not allow this to work.  Is there a way to achieve the same effect without using the table?  Update:  Elements inside the content div will have heights set to percentages as well. So something at 100% inside the div will fill it to the bottom. As will two elements at 50%.  Update 2:  For instance, if the header takes up 20% of the screen's height, a table specified at 50% inside #content would take up 40% of the screen space. So far, wrapping the entire thing in a table is the only thing that works.
2329
I want to remove width and height properties from img tags in certain content type  Currently it show's like this  &lt;img src="http://somesite.com/dostavka-slider-ng.jpg?itok=KDymQiug" width="938" height="300" alt="blablabla" title="blablabla" /&gt;   but I want  &lt;img src="http://somesite.com/dostavka-slider-ng.jpg?itok=KDymQiug" alt="blablabla" title="blablabla" /&gt;
120595
I'm having this problem, same as ever, but never try to find the right solution  code:   &lt;div id="ListOfTextAndPhotos"&gt;       &lt;div style="border-bottom: solid 1px silver;"&gt;           &lt;img src="photo.jpg" style="float: left"&gt;           Some text about the photo       &lt;/div&gt;       &lt;div style="border-bottom: solid 1px silver;"&gt;           &lt;img src="photo2.jpg" style="float: left"&gt;           Some text about the photo2       &lt;/div&gt;       &lt;div style="border-bottom: solid 1px silver;"&gt;           &lt;img src="photo3.jpg" style="float: left"&gt;           Some text about the photo3       &lt;/div&gt;   &lt;/div&gt;   Question: How do I to keep the photo inside the DIV? with the separator line under the photo
24124
Sometimes, when you create a question which returns a lot of similar questions, it makes the height of the floating "Similiar Questions" box too big to fit on the page. As a result, it blocks some of the footer on the right hand side. It's actually doing it as I type this question.  I think a max height based on the view port - footerHeight should fix it.
14667
Noticed that sometimes when there are 10+ answers to a question - some answers look like they have \n\n...\n line breaks in the end, so the body of the answer has incorrect height.  It probably has something to do with ViewHolder or adapter not setting correct row height. Although as far as I know, it should do this according to text amount/length.
87605
Apparently the new top bar rollout had some negative effects on the top bar of the network site . It looks completely unstyled:     Since I see this on different browsers and machines, I assume it's a server-side issue.
43600
On , the accepted answer doesn't float on top. Apart from that, the display is correct (i.e. the V mark and the green border)  If I sort by "vote", I've got the following answer order:   Jezell Marc Gravell chilltemp (Accepted) Shaun Bowe   By "oldest":   Marc Gravell Jezell chilltemp (Accepted) Shaun Bowe   and by "newest":   Shaun Bowe chilltemp (Accepted) Jezell Marc Gravell     I'm using Firefox V.3.5 : Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1) Gecko/20090624 Firefox/3.5 (.NET CLR 3.5.30729)  Feel free to ask for more debug information if needed.
93817
There is an alignment issue in the  page, under the Tags section the Add buttons has extra height.  Screenshot for reference:        The alignment issue is in all the Stack Exchange main and meta sites. Not sure this is due to the impact of the recent .
8738
I have a layout that is working, but it has one very annoying problem.. when the content is taller than the screen, the background stops.  This is the desired layout in bad-ASCII-art format:  _____________________  _ |    | long    |logo|   | |    | content |    |   | |    |         |    |   | |    |         |    |   | |grad|         |grad|   | Viewport |    |         |    |   | |    |         |    |   | |    |         |    |  _| |    |         |    | |    |         |    | _____________________  |2em| &lt;-20em-&gt;| 2em|   ..or with short content..  _____________________  _ |    | short   |logo|   | |    | content |    |   | |    |         |    |   | |    |         |    |   | |grad|         |grad|   | Viewport |    |         |    |   | |    |         |    |   | |    |         |    |   | |    |         |    |   | _____________________  _|   Basically it looks like a single column, with a glow as a column either side. Over the left-glow is a logo. When the content is short, it is still the full-height.  I have tried using the , which fixes the middle column, but then the gradients only extend as far as the content (in the left column, a single &amp;nbsp;, in the right column the logo)    Here is what the layout looks like:    And the problem (when the browser window is shrunk vertically):    Finally, the problem HTML/CSS,
96021
When deleting a comment, the page layout goes haywire, making it impossible to continue working on the page until it is reloaded. It appears something is going b0rken when the 'deleted' state is swapped in.  I can reproduce this on both Chrome (80.0.3987.149) and on Firefox (74.0), on Mac OS X. I disabled all all browser extensions to ensure this was not caused by something I installed locally.  The same effects can also be observed when reviewing in the review queues, where review items result in nested page Chrome.  Comment deleting example  This is the page before deleting a comment (comments blurred to focus on the layout, not content):        After deleting the top comment, where the comments were layd out before, we now have just the deleted comment:        The sidebar on the right has been partially re-arranged. The other comments have mostly disappeared, except for their icons and vote counts, and now take up more space, below:        and if I scroll to the right, those comments are scrunched up on the right-hand side below.. is that an extra page footer?!        Before anyone asks: no, you can't delete those comments on the right now, as we now have double-loaded JavaScript structures. I can't make it recurse. :-P  Trying to diagnose this, I notice that the comment is being replaced by something that has a &lt;title&gt;&lt;/title&gt; element followed by a whole load more tags I'd expect to find in the head of a HTML page.  So I looked at the AJAX response, and it indeed contains a full document:  {"Success":true,"Warning":false,"NewScore":-1,"Message":"&lt;!DOCTYPE html&gt;\r\n\r\n\r\n    &lt;html class=\"html__responsive html__unpinned-leftnav\"&gt;\r\n\r\n    &lt;head&gt;\r\n\r\n        &lt;title&gt;&lt;/title&gt;\r\n        &lt;link [ ... long document elided ... ]    &lt;/body&gt;\r\n    &lt;/html&gt;\r\n","Refresh":false,"Transient":false,"Info":false}   Review issues  This also happens when reviewing; review items are loaded over AJAX with full page chrome:        Skipping a review post simply results in a JavaScript error (TypeError: $(...).html(...).addSpinner is not a function) as the returned response with full HTML page is clearly not working  for whatever is processing the responses.  Can this please be fixed?
44783
You can currently only resize the text box in chat. Given that there's only a few pixels below the text box, this resizing doesn't help all that much.    Would it be possible to make the entire bottom div resizeable, rather than just the text box (with the height of the text box dependent on the height of the div)?  (No longer suggesting resizing the textbox itself upwards, as this doesn't appear to be a possibility)
93718
Math Stack Exchange was much better before the top bar was made a floating header, always in the way of reading the site especially when scrolling up and down.  Is there a way to remove this remedial nuisance; the information the banner holds is not needed so often that it has to always be on the screen.
89395
Currently I am posting this on a page without any CSS style. Anyone else experiencing this?  I am using Firefox 3.5.2 and have tried refreshing (CTRL + F5) multiple times, even closing the browser. I do have Stylish installed and was using it to create a Hot Dog Stand theme, but it was inactive when this happened.  Screenshot:
31813
Although elements like &lt;div&gt;s normally grow to fit their contents, using the float property can cause a startling problem for CSS newbies: If floated elements have non-floated parent elements, the parent will collapse. For example:   &lt;div&gt;   &lt;div style="float: left;"&gt;Div 1&lt;/div&gt;   &lt;div style="float: left;"&gt;Div 2&lt;/div&gt; &lt;/div&gt;    The parent div in this example will not expand to contain its floated children - it will appear to have height: 0. How do you solve this problem? I would like to create an exhaustive list of solutions here. If you're aware of cross-browser compatibility issues, please point them out. Solution 1 Float the parent.   &lt;div style="float: left;"&gt;   &lt;div style="float: left;"&gt;Div 1&lt;/div&gt;   &lt;div style="float: left;"&gt;Div 2&lt;/div&gt; &lt;/div&gt;    Pros: Semantic code. Cons: You may not always want the parent floated. Even if you do, do you float the parents' parent, and so on? Must you float every ancestor element? Solution 2 Give the parent an explicit height.   &lt;div style="height: 300px;"&gt;   &lt;div style="float: left;"&gt;Div 1&lt;/div&gt;   &lt;div style="float: left;"&gt;Div 2&lt;/div&gt; &lt;/div&gt;    Pros: Semantic code. Cons: Not flexible - if the content changes or the browser is resized, the layout will break. Solution 3 Append a &quot;spacer&quot; element inside the parent element, like this:   &lt;div&gt;   &lt;div style="float: left;"&gt;Div 1&lt;/div&gt;   &lt;div style="float: left;"&gt;Div 2&lt;/div&gt;   &lt;div class="spacer" style="clear: both;"&gt;&lt;/div&gt; &lt;/div&gt;    Pros: Straightforward to code. Cons: Not semantic; the spacer div exists only as a layout hack. Solution 4 Set parent to overflow: auto.   &lt;div style="overflow: auto;"&gt;   &lt;div style="float: left;"&gt;Div 1&lt;/div&gt;   &lt;div style="float: left;"&gt;Div 2&lt;/div&gt; &lt;/div&gt;    Pros: Doesn't require extra div. Cons: Seems like a hack - that's not the overflow property's stated purpose. Comments? Other suggestions?
6858
There have been  for a while, but this is ridiculous. It reminds me of , but this time it's network-wide.   The banner must be scrolled past (or dismissed) on every page unless both first-party JavaScript and first-party cookies are enabled. If first-party JavaScript is enabled, and the banner is visible, the rest of the page jumps up and down every so often.  Under certain circumstances (not quite sure what they are, yet – a direct link to an answer, maybe? I'm seeing it ) the entire page jumps up and down a line every few seconds even when the banner is off-screen.   The cookie banner keeps coming back unless both third-party JavaScript  are enabled (and  is solved). The cookie box occludes the “Learn more about Teams” link in the banner (with default Firefox window sizes) and the Job / Teams link in the sidebar.  As it stands,  – a site for hobbyists and researchers, whose audience is not very likely to purchase Teams – is much, much harder to use, for no benefit that I can see. Can you roll back this change, please?
92058
Currently it's impossible to see the bottom line of code snippets because the horizontal scroll bar is positioned over the top of them ():    Please could you add some bottom padding so that it's possible to view the last line of code snippets?  Unlike  which is a support question with a workaround answer, this is a feature request suggesting a clear action hence not a duplicate.
97156
This one's a bit weird. Any time I view a question through a direct link to one of its comments (Whether through an inbox notification, an outside link, or just clicking the time on a comment on a page I'm already on), the page loads up with the title whole content area (answers, vote buttons, sidebar and all) aligned weirdly. Once I reload the page through any other link (and thus get rid of the #comment bit), it looks good again.    System Info: Win7, IE11, no toolbars, no add-ons, no userscripts, etc.