Auto height div with overflow and scroll when needed

后端未结

关注

 10  2162

I\'m trying to make a website with no vertical scrolling for a page, but i need that one of the DIVs i have to expand vertically to the bottom of the page (at most), and tha

相关标签:

10条回答

梦毁少年i

2020-12-08 07:03

Well, after long research, i found a workaround that does what i need: http://jsfiddle.net/CqB3d/25/

CSS:

body{
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 100%; 
    max-height: 100%; 
}

#caixa{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
#framecontentTop, #framecontentBottom{
    position: absolute; 
    top: 0;   
    width: 800px; 
    height: 100px; /*Height of top frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: navy;
    color: white; 
}

#framecontentBottom{
    top: auto;
    bottom: 0; 
    height: 110px; /*Height of bottom frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: navy;
    color: white;
}

#maincontent{
    position: fixed; 
    top: 100px; /*Set top value to HeightOfTopFrameDiv*/
    margin-left:auto;
    margin-right: auto;
    bottom: 110px; /*Set bottom value to HeightOfBottomFrameDiv*/
    overflow: auto; 
    background: #fff;
    width: 800px;
}

.innertube{
    margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
    padding: 130px 0 110px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/
}

* html #maincontent{ /*IE6 hack*/
    height: 100%; 
    width: 800px; 
}

HTML:

<div id="framecontentBottom">
    <div class="innertube">
        <h3>Sample text here</h3>
    </div>
</div>
<div id="maincontent">
    <div class="innertube">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque, ligula hendrerit euismod auctor, diam nunc sollicitudin nibh, id luctus eros nibh porta tellus. Phasellus sed suscipit dolor. Quisque at mi dolor, eu fermentum turpis. Nunc posuere venenatis est, in sagittis nulla consectetur eget... //much longer text...
    </div>
</div>

might not work with the horizontal thingy yet, but, it's a work in progress!

I basically dropped the "inception" boxes-inside-boxes-inside-boxes model and used fixed positioning with dynamic height and overflow properties.

Hope this might help whoever finds the question later!

EDIT: This is the final answer.

0 讨论(0)

[愿得一人]

2020-12-08 07:06

Try this:
CSS:

#content {
  margin: 0 auto;
  border: 1px solid red;
  width:800px;
  position:absolute;
  bottom:0px;
  top:0px;
  overflow:auto
}

HTML:

<body>
<div id="content">
...content goes here...
</div>
<body>

If you don't like absolute positioning in this case, just can play with making a parent and child div to this one, both with position:relative.

EDIT: Below should work (I just put the css inline for the moment):

<div style="margin:0 auto; width:800px; height:100%; overflow:hidden">
<div style="border: 1px solid red; width:800px; position:absolute; bottom:0px; top:0px; overflow:auto">
...content goes here...
</div>
</div>

0 讨论(0)

太阳男子

2020-12-08 07:10

This is a horizontal solution with the use of FlexBox and without the pesky absolute positioning.

body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: row;
}

#left,
#right {
  flex-grow: 1;
}

#left {
  background-color: lightgrey;
  flex-basis: 33%;
  flex-shrink: 0;
}

#right {
  background-color: aliceblue;
  display: flex;
  flex-direction: row;
  flex-basis: 66%;
  overflow: scroll;   /* other browsers */
  overflow: overlay;  /* Chrome */
}

.item {
  width: 150px;
  background-color: darkseagreen;
  flex-shrink: 0;
  margin-left: 10px;
}

<html>

<body>
  <section id="left"></section>
  <section id="right">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </section>
</body>

</html>

0 讨论(0)

有刺的猬

2020-12-08 07:12

i think it's pretty easy. just use this css

.content {
   width: 100%;
   height:(what u wanna give);
   float: left;
   position: fixed;
   overflow: auto;
   overflow-y: auto;
   overflow-x: none;
}

after this just give this class to ur div just like -

<div class="content">your stuff goes in...</div>

0 讨论(0)

上一页 1 2