CODEWITHSUNDEEP
htmlcss
Busturdust
Busturdust

Reputation: 2485

HTML/CSS - Scrollable section does not fit to the page.

I have a web application, which I did not develop myself, but am tasked with cleaning up a few things that are no longer working.

There is one issue that I am not really able to figure out why it is happening.

The web application is split into two panels. However, the second panel which is scrollable does not reach the bottom of the page, when a user scrolls all the way down.

Also by zooming out (ctrl -) we get a blank area at the bottom, although the panel can continue scrolling.

Id like to have this panel, scroll as if it was the full page.

Ive put a quick static copy up on fiddle at.

https://jsfiddle.net/brianz820/qmzw8923/

The section in question I believe is.

<div id="house-estimates-scroll-panel">
    <div id="house-estimates-listing"></div>
</div>

div#house-estimates-scroll-panel {
    position: relative;
    /*display: inline-block;*/
    margin: 0;
    padding: 0;
    height: 1200px;
    /*height: 100%;*/
    /*width: 100%;*/
    overflow-y: visible ;
    overflow-x:hidden;
    background-image: linear-gradient(to right, #f3f3f3 , #bbb);
    background-size: 15px 20px;
    background-position: right;
    background-repeat: repeat-y;

}

div#house-estimates-listing {
    margin: 0;
    padding: 0;
    height: 90000px;
    /*width: 320px;*/
    /*width: 960px;*/
}

Ive added the full HTML and CSS sections to the fiddle.

Upvotes: 0

Views: 133

Answers (1)

Joseph Marikle
Joseph Marikle

Reputation: 78520

You could try making the wrapper into a display:flex container by adding these rules (some look weird because of specificity issues)

body {
  height: 100%;
}

div#wrapper {
  flex-direction: column;
  height: 100%;
  display:flex;
  overflow: hidden;
}

div#house-estimates-panel {
  display:flex;
  overflow: hidden;
}

div#house-estimates-scroll-panel{
  height: auto;
  flex: 1 auto;
}

div#house-estimates-listing {
  height: auto;
}

demo: https://jsfiddle.net/gw35wc4c/1/show/
source (my css is at the bottom): https://jsfiddle.net/gw35wc4c/1/

Upvotes: 4

Related Questions