0

Let's imagine that we have some list container (a div in the code below) that we need to be able to resize the viewport it is visible on. We need some border around the list's content (border has "brown" color in my example). So here is the problem.

If the list content fits in viewport without scrolling then the border must envelop the list content tightly (so I can't set the border to div "Column Left" because I don't need the border around the whole large area which can potentially contain list items).

Nice

If the viewport is small and the list content is to scroll then the border must persist (I miss it at the container's top and bottom in my vertial list example).

Not nice

That's pretty common behaviour for GUI.

.bkgnd {
    position: absolute;
    background-color: grey;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.Column{
    overflow: auto;
    position: absolute;
}

.Left{
    width: 460px;
    top: 100px;
    bottom: 70px;
    left: 17px;
}

.ListItem{
    background-color: yellow;
    margin: 5px 0 0 0;
}

.ListItem:first-child{
    margin: 0;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />


</head>

<body>
    <div class="bkgnd">
        <div class="Column Left">
            <div style="padding: 5px; background-color: brown;">
                <div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
                <div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
                <div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
                <div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
                <div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
                <div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
            </div>
        </div>
    </div>
</body>

2 Answers 2

1

This would work better if you give the divider around the list items an id and set the styles above with the rest of the CSS. Is there a reason this wouldn't work for your situation?

In the HTML:

<div id="testing">
  <div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
  <div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
  <div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
  <div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
  <div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
  <div class="ListItem">item</div><div class="ListItem">item</div><div class="ListItem">item</div>
</div>

In the CSS:

#testing {
  border: 5px solid brown;
  background-color: brown;
  overflow: auto;
  position: absolute;
  width:  450px;
  max-height: 100%;
  top:    0px;
  left:   0px;
}

Then change the .Column class properties so that overflow is visible.

.Column{
  overflow: visible;
  position: absolute;
}

Side Note: If you're looking to make a responsive webpage, you should be using percentages rather than pixels as often as possible. Also, is there a reason you're preferring to use div elements instead of list elements?

1
  • Yes, it works some better, but the scrollbar appears inside the border which doesn't look good. P.S. List elements is ok too.
    – N.Cherney
    Apr 7, 2017 at 7:21
0

Here's the html/css with a jsfiddle with a working example

EDIT: Edited due to your response to the other answer. the brown border is now inside the scrollbar when there is overflow

EDIT2: Second edit due to comment on this answer. The best i could come up with was to remove the position: absolute; and change that to position: relative; with a max-height.

https://jsfiddle.net/qb3rsre8/7/

3
  • The border in your example doesn't envelop the list content tightly if the viewport is big. There is a big empty space below that's not nice.
    – N.Cherney
    Apr 8, 2017 at 6:48
  • @N.Cherney i've updated the jsfiddle, it's the best i could come up with without using any jquery/javascript (see my edit2 + jsfiddle)
    – philr
    Apr 8, 2017 at 18:55
  • Looks like it is doomed to have js. Possibly I'm asking too much from CSS.
    – N.Cherney
    Apr 8, 2017 at 23:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.