2

I have some problems on how to program a responsive "content" box from bootstrap. As in the JsFiddle-Link shown I want to make the inner of the Bootstrap content-inner responsive.Here a note]

In the content-inner box i have

  • one div which has a fixed width (red)

  • the second container (an article container) is the container which should take the remaining space of the page (so as the height gets bigger the white background should get bigger and the top and bottom grey space smaller). This Container has also an overflow-y but the overflow-x is hidden because of the scroll bar on the right there would also be a scrollbar at the bottom. (green)

  • and the third one has a fixed width, too (blue)

Attention on the space at the top and the bottom, there should be a space.

I din't really know that much methods on realizing/solving this problem.
So I searched for methods on how to realize and I found the CSS Calc() function. Is it true that this "function" is just experimental? I tested it with this function but I didn't really got a successfull result so I don't know any more methods.

My problems I got when testing to resolve this issue was that the white background of the content-inner box where all the content is located went away :/
I tried to fix it with the Bootstrap class clearfix but I wasn't successfull.

So do you have any solution on how to solve this problem?

Thank you for all the helpfull results and answers and thank you for any help. :)

4

1 回答 1

0

我不是 100% 我完全理解您的问题，但是如果您希望文章上方和下方的元素是固定高度并且可滚动文章以响应不同的视口高度，这里是解决方案（请注意，我找不到您在其中设置“红色”和“蓝色”框的确切高度）：

.height-450 {
  overflow: auto;
  height: calc(80vh - 100px - 200px);
}

'100px' 是给定的红色框的固定高度，'200px' 是给定的蓝色框的固定高度。“vh”代表“视口高度”，其中“100vh”是整个高度。您可以使用 vh 和 px 以外的其他单位。

您可以通过有意的高度来控制上下灰度空间，或者只是确保（通过给定的代码）内容内部永远不会占据视口的全部高度。请注意，后者会将所有内容保留在给定视口内，因此所有内容始终可见。

PS 请注意，您的许多 CSS 可以被标准 Bootstrap 类替换。

并且 CSS calc() https://www.w3schools.com/cssref/func_calc.asp被广泛支持https://caniuse.com/#search=calc

于 2018-04-28T10:40:02.457 回答