I need to make the child height relative to the viewport. Using HTML:  &lt;div class="parent"&gt;My divider   &lt;div class="child"&gt;       Inside the div   &lt;/div&gt; &lt;/div&gt;   and CSS:  .t1 {     background:#f00;     color:#fff; }  .t2 {   background:#212121;   height:100vh; }     As you can see from the example, There's always this small gap, because it takes into account the overall height of the parent. However, I only need the child to fill "the rest" of the viewport from parent.  How should I proceed? I've tried many other things, but without sufficient result
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.
86942
I have a container div that holds two internal divs; both should take 100% width and 100% height within the container.  I set both internal divs to 100% height. That works fine in Firefox, however in IE the divs do not stretch to 100% height but only the height of the text inside them.  The following is a simplified version of my style sheet.  #container {    height: auto;    width: 100%; }  #container #mainContentsWrapper {    float: left;     height: 100%;    width: 70%;    margin: 0;    padding: 0; }   #container #sidebarWrapper {          float: right;     height: 100%;    width: 29.7%;    margin: 0;    padding: 0; }   Is there something I am doing wrong? Or any Firefox/IE quirks I am missing out?
56636
How can I reduce the gap between the subfloat and its caption? I tried to use   \captionsetup[subfigure]{aboveskip=0pt}    but it doesnt work for me. Below is the snippet i have and the output  \begin{figure} \captionsetup[subfigure]{labelformat=empty} \captionsetup[subfigure]{aboveskip=0pt}     \centering     \subfloat[Ground Truth]{{\includegraphics[width=\textwidth]{ood-ms/ood-1-gt.png} }}     \\ \vspace{-1\baselineskip}     \subfloat[Recurrent Neural Network]{{\includegraphics[width=\textwidth]{ood-ms/ood-1-rnn.png} }}     \\ \vspace{-1\baselineskip}     \subfloat[]{{\includegraphics[width=\textwidth]{ood-ms/ood-1-vrnn.png} }}     \\ \vspace{-0.5\baselineskip} \noindent\rule{14cm}{0.4pt}     \subfloat[]{{\includegraphics[width=\textwidth]{ood-ms/ood-3-gt.png} }}     \\ \vspace{-1\baselineskip}     \subfloat[]{{\includegraphics[width=\textwidth]{ood-ms/ood-3-rnn.png} }}     \\ \vspace{-1\baselineskip}     \subfloat[]{{\includegraphics[width=\textwidth]{ood-ms/ood-3-vrnn.png} }}     \\ \vspace{-0.5\baselineskip} \noindent\rule{14cm}{0.4pt}         \subfloat[]{{\includegraphics[width=\textwidth]{ood-ms/ood-1-gt.png} }}     \\ \vspace{-1\baselineskip}     \subfloat[]{{\includegraphics[width=\textwidth]{ood-ms/ood-1-rnn.png} }}     \\ \vspace{-1\baselineskip}     \subfloat[]{{\includegraphics[width=\textwidth]{ood-ms/ood-1-vrnn.png} }}     \\ \vspace{-0.5\baselineskip} \noindent\rule{14cm}{0.4pt}     \subfloat[]{{\includegraphics[width=\textwidth]{ood-ms/ood-3-gt.png} }}     \\ \vspace{-1\baselineskip}     \subfloat[]{{\includegraphics[width=\textwidth]{ood-ms/ood-3-rnn.png} }}     \\ \vspace{-1\baselineskip}     \subfloat[]{{\includegraphics[width=\textwidth]{ood-ms/ood-3-vrnn.png} }}     \\ \vspace{-1\baselineskip}     \caption{}     \label{fig:ms} \end{figure}   Here is the output
26006
I want to show an image from an URL with a certain width and height even if it has a different size ratio.  So I want to resize (maintaining the ratio) and then cut the image to the size I want.  I can resize with html img property and I can cut with background-image.  How can I do both?  Example:  This image:     Has the size 800x600 pixels and I want to show like an image of 200x100 pixels   With img I can resize the image 200x150px:  &lt;img      style="width: 200px; height: 150px;"      src="http://i.stack.imgur.com/wPh0S.jpg"&gt;    That gives me this:    &lt;img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg"&gt;       And with background-image I can cut the image 200x100 pixels.  &lt;div      style="background-image:            url('https://i.stack.imgur.com/wPh0S.jpg');      width:200px;      height:100px;      background-position:center;"&gt;&amp;nbsp;&lt;/div&gt;    Gives me:        &lt;div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;"&gt;&amp;nbsp;&lt;/div&gt;      How can I do both?  Resize the image and then cut it the size I want?
102812
&lt;div class="subheader"&gt;         &lt;h1&gt;         &lt;/h1&gt; &lt;/div&gt;   .subheader has style border-bottom: 1px solid #e4e6e8;.  The bottom border should be below the whole title (I guess, the point is to separate the whole title). But the height of this div is hardcoded height: 40px;.  Shouldn't it be like this? (the screenshot with height: 80px;).
173
I want to center a div vertically with CSS. I don't want tables or JavaScript, but only pure CSS. I found some solutions, but all of them are missing Internet Explorer 6 support. &lt;body&gt;     &lt;div&gt;Div to be aligned vertically&lt;/div&gt; &lt;/body&gt;  How can I center a div vertically in all major browsers, including Internet Explorer 6?
120383
I have this test file which is supposed to put Hello there. near the top of the page but it does not work in so far as there is still tons of vertical space at top. How can I fix this?  \documentclass{article} \begin{document} \vspace{-10cm} Hello there. \end{document}
24835
Can someone confirm that its not possible to change the height of a dropdown that is shown when you click on a select box.   The size attribute of the select makes it look like a list, the height attribute in the CSS doesnt do much good either.
12329
Say we have a LWC with the following template in a component named example:  &lt;template&gt;     &lt;lightning-textarea class="test"&gt;&lt;/lightning-textarea&gt; &lt;/template&gt;   And some css to go with it:  .test textarea {     min-height: 500px; }   The expected behavior is that the lightning-textarea will be 500px tall because the nested textarea has been made 500px tall.  The actual behavior is that nothing happens. The reason for this is that the compiled css will be:  .test[c-example_example] textarea[c-example_example] {     min-height: 500px; }   And the compiled (relevant parts of the) html will be:  &lt;lightning-textarea c-example_example lightning-textarea_textarea class="test"&gt;     &lt;textarea lightning-textarea_textarea&gt;&lt;/textarea&gt; &lt;/lightning-textarea&gt;   It's obvious that the  has scoped the textarea element to its parent, lightning-textarea and not our example component. This is an issue because the CSS processor has appended [c-example_example] not only to the .test part of the selector, but textarea as well.  It makes sense that CSS would be scoped downward, which is how Aura components handled scoping, but in LWC it's actually entirely isolated, so neither parent nor child elements can target it.  Is there any way around this? Or plans to support targeting child components? Being able to override and tweak the CSS of the standard component library was a very handy feature of Aura components, allowing customized appearances without having to rewrite the base component from scratch.  On top of that, this means that you can't reuse your own components in different contexts, giving them different styles in each. The component itself must be responsible for  all of its styling. While this is possible it requires a lot of conditional class assignments which is frustrating.
114657
How do I get a div to automatically adjust to the size of the background I set for it without setting a specific height (or min-height) for it?
58280
I'm trying to center a fixed size control within a form.  Out of interest, is there a non-idiotic way of doing this? What I really want is something analogous to the text-align css property.  At the moment, I'm setting the padding property of the surrounding form to a suitable size and setting the Dock property of the control to fill.
28492
I'm trying to set max-height property to slds-scrollable_y class inside lighting-datatable web component via css with:  .slds-crollable_y{     max-height: 10rem !important; }   But it's not working. Is it even possible to overwrite standard lwc css as it was in aura?
25947
I have the following code for my masterpage:  &lt;%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %&gt; &lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head runat="server" style="position:relative"&gt;     &lt;title&gt;Masterpage&lt;/title&gt;     &lt;asp:ContentPlaceHolder id="head" runat="server"&gt;     &lt;/asp:ContentPlaceHolder&gt; &lt;/head&gt; &lt;body&gt;     &lt;form id="main" runat="server" style="position:relative"&gt;     &lt;div&gt;         &lt;asp:ContentPlaceHolder id="MainContent" runat="server"&gt;         &lt;/asp:ContentPlaceHolder&gt;     &lt;/div&gt;     &lt;/form&gt;     &lt;br style="clear:both" /&gt;     &lt;form id="footer" style="position:relative"&gt;     &lt;div&gt;         &lt;center style="font-size:small"&gt;Footer content&lt;/center&gt;     &lt;/div&gt;         &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;   My problem is that when the MainContent isn't filling up the page the footer is not at the bottom of the page. Is there a way to force the footer to stay on the bottom of the page if the main content isn't pushing it all the way down? When the main content is "big" enough it pushes the footer down with the content and displays on the bottom when scrolling down, but not if it is to small.  Anybody know how to fix this?
13086
I want to put two &lt;div&gt;s next to each other. The right &lt;div&gt; is about 200px; and the left &lt;div&gt; must fill up the rest of the screen width? How can I do this?
42
How can I horizontally center a &lt;div&gt; within another &lt;div&gt; using CSS? &lt;div id=&quot;outer&quot;&gt;   &lt;div id=&quot;inner&quot;&gt;Foo foo&lt;/div&gt; &lt;/div&gt;
37341
When styling text on web pages, both font size and line height can be set. For example, the text of this post will be displayed using a font-size of 14px and a line-height of (about) 18px, set using the value 1.3em.  Looking at other websites, it seems that a ratio around 1.2 is a common practice.  What is the best practice regarding this? What are some good resources from which I can learn more on the subject?
5071
I just noticed that here on meta the footer doesn't stick to the bottom of the page, I know that it's not that big of a deal but it does look a bit clumsy.    Shouldn't there be an easy fix for this?  EDIT:  Since this has been reproduced and discussed by some members I was wondering if anyone is actually trying to fix this?  EDIT: (imported from , )  #footer.categories #svnrev has margin-bottom: 10px;. It should have margin:0, or be moved alongside #copyright.