Question

我有一个带有三个内部div的侧边栏，如下所示：

<div class="sidebar">
    <div class="top">
        <h3>Title</h3>
        <img src="somesource.jpg" alt="The size of this can change" />
    </div>
    <div class="middle">
        <!-- there is an unknown amount of content here represented below coming from a server -->
        <h2>There may be very few of these or a lot of them</h2>
        <p>see the heading also in this div</p>
    </div>
    <div class="bottom">
        <button>This is a button for navigation only visible in the sidebar</button>
    </div>
</div>

我的css如下所示：

.sidebar {
    position:fixed;
    height: calc(100% - 67px); /* height of the window - height of the header */
    width: 20%;
    bottom: 0px;
    right: 20px;
}
.bottom {
    height: 100px;
}

我需要添加什么css才能使.top占用所需的空间，.bottom坚持到.sidebar的底部，然后.middle占用所有剩余空间并在必要时滚动？目前，使用javascript不是一个选项，因为我的老板直接指示我没有javascript这样做。

编辑：

我现在可以使用javascript，我可以通过计算.top的高度并将.bottom的高度从100％减去并将.middle的底部设置为.bottom的高度来实现。

Answer 1

你尝试过这样的事吗？

<table class="sidebar">
<tr class="top">
    <td><h3>Title</h3>
        <img src="somesource.jpg" alt="The size of this can change" /></td>
</tr>
<tr class="middle">

    <td><h2>There may be very few of these or a lot of them</h2>
        <p>see the heading also in this div</p></td>
</tr>
<tr class="bottom">
    <td><button>This is a button for navigation only visible in the sidebar</button></td>
</tr>

和

table {
  position: relative;
  left: 70%;
  width: 10px;
}

Answer 2

如果我没有误解这个问题，你所寻找的是一个流畅且高度固定的布局。

我认为没有任何方法可以做你想要的东西并且让.middle容器滚动，因为你需要设置一个固定/ percantage高度，以便能够做到这一点（或设置一个高度.top元素已经建议）。无论如何，这是我所做的一个qucik解决方案，可能会帮助您获得类似于您想要的东西。

Fiddle

<强> HTML

<div class="sidebar">
    <div class="container">
        <div class="top">
            <h3>Title</h3>
            <img src="http://dummyimage.com/200x100/000/fff" alt="The size of this can change" />
        </div>
        <div class="middle">
            <h2>There may be very few of these or a lot of them</h2>
            <p>see the heading also in this div ASDFasdf asdf asdf asdf asdf asdf</p>
        </div>
    </div>
    <div class="bottom">
        <button>This is a button for navigation only visible in the sidebar</button>
    </div>
</div>

<强> CSS

.sidebar {
    position:fixed;
    padding-top: 167px; /* add .bottom height (100px) */
    height: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 20%;
    bottom: 0;
    right: 20px;
}
.container {
    position: relative;
    height: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: -100px; /* set to .bottom height */
    overflow: auto;
}
.bottom {
    height: 100px;
}

如果您需要更好的浏览器支持，可以使用alternative来计算calc（），就像我在答案中所做的那样。

灵活的高度滚动div

2 个答案: