html - 在 2 个静态 div 之间滚动 div

Question

我正在尝试制作一个游戏终端；我想要两个条，一个在顶部，一个在底部，在它们之间需要一个滚动 div 来显示文本。

我尝试自己做，结果是这样的: https://gyazo.com/0f98fd10e72f8ce104148b7cf51d861a

如您所见:输入字段(需要一直在底部)和文本在它后面并稍微靠上一点。

它应该是这样的: https://gyazo.com/dbe572d83a6d00c1f45b5f1696fd4636

代码:

<div style="width: 100%; height: 100%; position: relative;">

    <div style="background: #4C3C33; width:100%; color: #FFFFFF;">

        <span id="gameTerminal_statusIcon">

            <span class="fa fa-circle" style="color: red; width: 16px; height: 16px;">

            </span>

        </span>


        <span id="gameTerminal_status">&nbsp;Live</span>

    </div>

<div class="well-md" id="gameTerminal" style="overflow-x: hidden; background: #2A211C; height: 100%; max-width: 100%; overflow-y:scroll; font-family:'Courier New', Courier, monospace;">

    <p>

        <span id="gameTerminal_content" style="color:#80FF80; width: 100%;">

            <!--game terminal content goes here-->

        </span>

        <style>

            .gameTerminal_content_outputLine:nth-of-type(odd) { 

                width: 100%; background: #44362E; 

            }

            .gameTerminal_content_outputLine {

                display: inline-block;

            }

        </style>

            <script>showLoading('gameTerminal_content', '32', 'html', '');</script>

    </p>

    <div id="gameTerminal_scrollHeigth"></div>

</div>

    <form action="#" method="POST" onsubmit="gameTerminal_executeCommand(); return false;">

        <input
            type="text"
            name="gameTerminal_input"
            style="background: #4C3C33; width:100%; color: #FFFFFF; border: 0; outline: 0; bottom: 0px; position: absolute;"
            placeholder="Type your command here..."
            autocomplete="off"
        />

    </form>

</div>

提前致谢

Answer 1

您可以使用 Flexbox 并在您想要滚动条的 div 上添加 overflow-y: scroll。

* {
  box-sizing: border-box;
}
.content {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  height: 150px;
  width: 80%;
  margin: 0 auto;
}
.top {
  flex: 1;
  overflow-y: scroll;
}
input {
  width: 100%;
}
.box {
  color: #60965C;
  min-height: 30px;
  line-height: 30px;
}
.box:nth-child(2n+2) {
  background: #2A211C;
}
.box:nth-child(2n+1) {
  background: #44362E;
}

<div class="content">
  <div class="top">
    <div class="box">Lorem ipsum dolor.</div>
    <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque nobis facere atque aperiam, praesentium doloremque recusandae, laborum. Velit, voluptates similique.</div>
    <div class="box">Lorem ipsum dolor.</div>
    <div class="box">Lorem ipsum dolor.</div>
    <div class="box">Lorem ipsum dolor.</div>
    <div class="box">Lorem ipsum dolor.</div>
  </div>
  <div class="bottom">
    <input type="text" placeholder="Enter text here">
  </div>
</div>

你也可以使用 calc() 而不是 Flexbox 来获取高度

* {
  box-sizing: border-box;
}
.content {
  border: 1px solid black;
  height: 150px;
  width: 80%;
  margin: 0 auto;
}
.top {
  height: calc(100% - 20px);
  overflow-y: scroll;
}
input {
  width: 100%;
  height: 20px;
}
.box {
  color: #60965C;
  min-height: 30px;
  line-height: 30px;
}
.box:nth-child(2n+2) {
  background: #2A211C;
}
.box:nth-child(2n+1) {
  background: #44362E;
}

<div class="content">
  <div class="top">
    <div class="box">Lorem ipsum dolor.</div>
    <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque nobis facere atque aperiam, praesentium doloremque recusandae, laborum. Velit, voluptates similique.</div>
    <div class="box">Lorem ipsum dolor.</div>
    <div class="box">Lorem ipsum dolor.</div>
    <div class="box">Lorem ipsum dolor.</div>
    <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis sit consectetur ad. Eius, nam! Officia soluta incidunt obcaecati provident vero at praesentium impedit, repellat, accusamus tenetur rem eius id quisquam.</div>
  </div>
  <div class="bottom">
    <input type="text" placeholder="Enter text here">
  </div>
</div>