CSS: Fix The Height of a Section Within a Variable Height Element

CSS: fix the height of a section within a variable height element

Using position: absolute and setting top, left, right, and bottom: http://jsfiddle.net/QARC9/

This article describes why it works.

http://www.alistapart.com/articles/conflictingabsolutepositions/

CSS layout with fixed top and bottom, variable height middle

Position the middle div using absolute positioning without specifying height. It does not get much simpler than this:

#header {    position: fixed;    top: 0;    left: 0;    right: 0;    height: 100px;    background-color: #abcdef;}#footer {    position: fixed;    bottom: 0;    left: 0;    right: 0;    height: 100px;    background-color: #abcdef;}#content {    position: fixed;    top: 100px;    bottom: 100px;    left: 0;    right: 0;    background-color: #F63;    overflow: auto;}

<div id="header"></div><div id="content"></div><div id="footer"></div>

Divide sections one with fixed height and one variable with flexbox

In order for the bottom section to fill up the remaining area, you could use the calc() function.

Since your top section has a fixed height, we can se the bottom section like this:

.top-section {
  // Change the X
  height: X; 
}

.bottom-section {
  // X is the height of the top section
  height: calc(100% - X); 
} 

How to shift element upwards to it's variable height using css

I think this is the effect you want. CSS doesn't allow you to get the height of an element to use in calc() for positioning and margins, so a little JS is needed.

CSS:

.body {
    background: #aaf;
    height: 300px;
    width: 300px;
    overflow: hidden;
}

.inner, .body:hover .inner {
    -webkit-transition:all linear 0.2s;
    transition:all linear 0.2s;
}

.inner {
    background: #afa;
    width: 300px;
    overflow: hidden;
}

.body:hover .inner {
    margin-top : 0 !important;
}

JS:

Array.prototype.forEach.call(document.getElementsByClassName('inner'), function (item) {
    item.style.marginTop = (item.clientHeight * -1) + 'px';
});

Demo:

http://jsfiddle.net/09tyLr9b/

How to auto adjust the div height according to content in it?

Try with the following mark-up instead of directly specifying height:

.box-centerside {  background: url("../images/greybox-center-bg1.jpg") repeat-x scroll center top transparent;  float: left;  min-height: 100px;  width: 260px;}

<div class="box-centerside">  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br>  This is sample content<br></div>

How to fix the height of a div element?

change the div to display block

.topbar{
    display:block;
    width:100%;
    height:70px;
    background-color:#475;
    overflow:scroll;
    }

i made a jsfiddle example here please check

http://jsfiddle.net/TgPRM/

How can I pass div height from JavaScript to CSS?

.clientHeight gives you height of the object. I'm just assigning that to the CSS variable.

 let div = document.querySelector(".wrapper")
        var height = document.querySelector(':root');
        height.style.setProperty('--height', div.clientHeight + "px");

:root {
        --height: x;
    }

    .wrapper {
        outline: 1px solid red;
        height: auto;
        position: relative;
        top: calc(100vh - var(--height));
    }

<div class="wrapper">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatibus, officiis! Lorem ipsum dolor sit amet
            consectetur, adipisicing elit. Dolore accusantium deserunt corrupti iure praesentium in reprehenderit
            placeat mollitia culpa labore nostrum, cumque obcaecati et sapiente dolores excepturi libero maiores
            arch</p>
    </div>

---

Related Topics