Question

我试图创建类似于聊天界面的东西，响应的文本将安装在两个div容器之间的中间位置。

代码：

<!DOCTYPE html>
<html>
<head>
<title>Artifical Intelligence</title>
<link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<div class="main" id="maindiv">
<div class="logo"></div>
</div>
<div class="superbox">
    <div class="middle_box">
        <div id="response_text">Sample Text</div>
    </div>
</div>
<div class="chat_tools">
<form id="chat_input">
<input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="msginput" id="inpmsg" type="text" placeholder="Test">
<input type="submit" style="display: none;"></input>
</form>
</div>
<style>
    html, body {
        height: 100%;
    }
    body {
        background-color: white;
        margin: 0px;
    }
    p {
        font-family: 'Oxygen', sans-serif;
    }
    *:focus {
        outline: none;
    }
    .main {
        position: fixed;
        display: flex;
    background-color: black;
        justify-content: center;
        width: 100%;
    z-index: 100;
        border-bottom: 1.8px solid blue;
    }
    .logo {
        width:110px;
        height:68.728px;
        padding: 10px;
    }
    .chat_tools {
        position: fixed;
    z-index: 99;
        width: 100%;
        bottom: 0px;
        border: 0px;
    }
    .micbox {
        height: 100%;
        width: 60px;
        display: none;
        background-color: black;
    }
    .msginput {
        width: 100%;
        height: 50px;
        color: #CD187F;;
        border: 0px;
        font-size: 0.9em;
        padding: 10px;
        background-color: black;
        border-top: 1.8px solid blue;
    }
    .superbox {
        position: relative;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        background-color: black;
    }
    .middle_box {
    position: relative;
    width: 100%;
    z-index: 98;
        overflow-y: scroll;
        display: flex;
    min-height: 260px;
        align-items: center;
    justify-content: center;
    }
    #response_text {
    font-size: 2.5em;
    color: black;
        overflow-y: scroll;
    text-align: center;
  color: white;
  overflow-y: scroll;
    }
    .main_flex {
    display: flex;
    flex-direction: column;
    padding: 0px;
    list-style-type: none;
     }
</style>

JsFiddle

如果容器之间的内部文本的长度非常小，它可以正常工作，但是在文本很大的情况下，它与外部元素重叠：

（text reference）

它应该如何：

如果您看到文字太大，它应该只在底部溢出。

如何在这两个元素之间正确包装文本？因此，如果文本不适合两个元素之间，它将是可滚动的。如您所见，文本及其容器的当前最大高度为100％，但据我所知它应为100% - div_size，其中div_size是另外两个以像素为单位的div，因此它也必须包含在它们（可能是通过垂直对中容器）。

现在也许这可以在Javascript中轻松完成，但有没有任何简洁有效的方法呢？

Answer 1

您的标记包含错误。就像基本的html文档结构一样。你没有<body>，没有关闭<html>。您还应该将<styles>放在页面底部而不是页面底部，它通常位于页面底部的脚本，就像您在顶部的javascript引用将其移动一样。 <input>也是自动关闭的，因此请删除</input>。我在示例中做了一些这些事情（删除了基本结构的东西，因为它们不是小提琴。

解决问题：在您的情况下，有一些方法可以解决此问题。将高度设置为已修复的两个容器，然后使用这些高度进行顶部和底部边距（如我的示例所示）。我确定有理由保持这些固定，但最好的（IMO）和最灵活的解决方案是不修复它们并在你的div周围的容器上使用flex。这样你就不必跟踪边距并且有固定的高度。

<强>解决方案：
header和footer将占用所需的空间，main将占用余下的空间。这样您就不需要position: fixed;和z-index噪音。我提供了一个shell，您可以根据需要添加徽标，文本和页脚内容。对于以main为中心的内容，您可以使用space-between，将:before和:after添加到main_text，这将始终使您的文字居中。

＆＃13;

  * {
  box-sizing: border-box;
}

body {
  height: 100vh;
  background-color: #dcdcdc;
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.header {
  flex-shrink: 0;
  height: 100px;
  width: 100%;
  background-color: black;
}

.main {
  flex-grow: 1;
  flex-shrink: 1;
  width: 100%;
  background-color: aqua;
  text-align: center;
  display: flex;
  padding: 10px;
}

.main_text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: white;
  min-height: 100%;
  overflow-y: scroll;
}

.main_text:before,
.main_text:after {
  content: '';
  display: block;
  width: 100%;
  min-height: .3rem;
}

.footer {
  flex-shrink: 0;
  height: 80px;
  width: 100%;
  background-color: deeppink;
}

＆＃13;

<div class="container">
  <div class="header"></div>

  <div class="main">
<div class="main_text">
  start Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium est autem alias suscipit quas magnam debitis itaque repudiandae error minus totam necessitatibus distinctio quaerat, praesentium culpa, eaque adipisci consequuntur a voluptatibus.
  Neque, consequatur dicta voluptates. Debitis voluptates eius recusandae magni accusantium harum praesentium suscipit eaque possimus. Tempora deleniti iure saepe voluptas obcaecati velit sit fugiat et amet ex, quam. Esse maiores iusto blanditiis!
  Vitae doloribus odio atque adipisci autem vel id quis illo pariatur ex labore dolor quisquam nemo accusamus numquam voluptatibus expedita nam laboriosam, quod reprehenderit! Vel explicabo iure eius quisquam, sequi vero adipisci maiores dicta eligendi
  libero necessitatibus laborum aspernatur ab corporis aperiam ipsam dignissimos ex ad rem dolore sit assumenda voluptates fugiat totam. In error eum inventore enim, impedit minima repudiandae fuga accusamus quasi consequuntur cumque consequatur molestiae
  eius labore nesciunt ex magnam possimus recusandae aut explicabo quo aliquam autem nobis? Vel assumenda, placeat repellendus, possimus ipsa maxime molestias dignissimos dicta voluptatem ex quae quia quasi enim error ipsam doloremque reprehenderit
  veniam corporis libero obcaecati repudiandae culpa odio animi, ea qui. Est fuga perspiciatis quis nostrum laborum ullam vel odit dicta accusantium temporibus, minus fugit pariatur inventore debitis quod vitae beatae sed reiciendis nemo velit sequi
  cum! Ullam autem laudantium, consectetur repellat vel sed facilis illum. end
  </div>
</div>

<div class="footer"></div>
</div>

＆＃13;

如果你想要fiddle

在另外两个div

1 个答案: