HTML, CSS how to make width of element always to bottom of page?


Tags: html,css

Problem :

I have the image fixed in the center of page and grey div around it. Margins for top, left and right are 15px but it must fill all to bottom of page. I have image to show you what I mean. My question is how to make div height all to bottom, depends on what screen resolution is? Image how it should look:

enter image description here

#IMAGE {
  padding-left: 20px;
  padding-right: 20px;
  /* padding-bottom: 50%; */
  border: 2px solid black;
  border-bottom: 2px solid #D1D1D1;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-color: #D1D1D1;
  bottom: 0px;
}
<div id="body">
  <div class="center" id="IMAGE">
    <h3 id="videoTitle"><?php echo "$title"; ?></h3> 
    <img src="./img/img.png" alt="Image" />
  </div>
</div>



Solution :

Easy,

Demo

body {
    overflow:hidden;
}

#wrapper {
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding:15px;
}

#wrapper:after {
    content:'';
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:-9999px;
    background:rgba(0,0,0,.2);
}

#wrapper img {
    position:relative;
    z-index:2;
}

    CSS Howto..

    How can I position two to always be side by side

    Centering Special Javascript Popup, How?

    How to make div expand only from bottom down

    How do I set the width of inputs within a column in Twitter Bootstrap's grid system?

    How to create a dropdown that is open by default and with custom scrollbars ( see pic from wireframes) in HTML [closed]

    How can fixed element push content down the page using CSS only?

    How to set a fixed width column with CSS flexbox

    How to blend an image with a solid colour in CSS?

    How to make a background using CSS gradient with flat color?

    How do I avoid using !important?

    How to calculate width of unused space for page with fixed width?

    How to put Logo & navigation in one line

    How to know where a CSS error occurred in dynamic content or how to stop the script upon CSS error

    How to increase a counter variable after a callback of a setTimeout-function?

    How to find out if an element is in a fixed positioned container?

    How do I remove a hover effect if the Element has focus?

    How to have images in line with text in css

    How to split multiple string using jQuery or javascript?

    how to put image on button? (css)

    How to add-class and focus the children on keydown function

    In CSS, how to make the colored background be at least 50% of pagewidth and at most 90%, and as wide as necessary?

    How to apply IE Fixes for LESS CSS [closed]

    How to select via regex all class notations in css file

    How do I make my elements occupy the width of their “max-width” specification?

    How to Implement YUI Compresser in a website [closed]

    How to position an image sprite at the bottom of an element of unknown height

    Make nav dropdown show above all other divs

    How to invert the pentagon created using CSS?

    How to make the page layout stay the same after minimized?

    how to make a child div visible when clicking its parent div in pure css