CODEWITHSUNDEEP
htmlcssstylesstylesheet
AlexM
AlexM

Reputation: 325

How to make the style of a div grow with the div's size?

I have a div in a HTML file that contains all the search results from a query, so its size is dynamic. I gave it the following style written in CSS:

#content {
position: absolute;
width: 75%;
min-height: 100%;
left: 13%;
right: 12%;
top: 12%;
background-color: #FFF;
border-left: 3px solid #81DAF5;
border-bottom: 3px solid #81DAF5;
word-wrap: break-word;
}

Everything works just fine if there are not many search results, i. . e. if they all fit onto the screen, but as soon as there are so many results that the user must scroll to see them all, the div grows (the elements in the overflow follow the position instructions from the CSS code), but its white color and the borders don't. This looks very silly and I have not found a way to solve this issue. Can anyone please help me?

Edit: I forgot to mention that if I do the same thing manually with paragraphs of text in the HTML file, everything works as expected, i. e. the div expands with every style I gave it.

Upvotes: 0

Views: 85

Answers (2)

Kirk Hadden
Kirk Hadden

Reputation: 59

You could add:

overflow-y: scroll;

At that point, the box remains the same size, but it becomes scrollable to see however many results there may be.

Edit --

Alternatively, you could try:

min-height: 100%;

To allow it to expand beyond it's initial size.

Upvotes: 0

slotdp02
slotdp02

Reputation: 438

Kirk's answer will allow you to scroll but you may want to add a parent element with relative position. That way, when you set the height of the absolutely positioned element to 100% it will take up 100% of the height of parent element. The relatively positioned parent element should expand cleanly with the data.

So you may want to style the parent element in this case. 

<div class="parent">
  <div class="dynamic-content"></div>
</div>

CSS:

.parent {
   position: relative;
   background-color: #FFF;
   border-left: 3px solid #81DAF5;
   border-bottom: 3px solid #81DAF5;
   margin: 12% auto 0;
}

.dynamic-content {
  height: 100%;
  word-wrap: break-word;
}

Upvotes: 1

Related Questions