Question

即使将浏览器窗口调整为任何大小，我也希望我的文本和图像能够完整显示。到目前为止它在I resize the window horizontally时起作用，但是当我垂直调整它时， it just clips over the content.

我也不想要任何侧面滚动条，因此调整了内容。

＆＃13;

body {
  background-color: #CFFFE7;
  overflow: hidden;
}

#master {
  display: table;
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 30px 70px 60px 70px;
  height: 100%;

}

p {
  font-weight: bold;
  font-size: 20px;
  font-size: 2vw;
  font-family: sans-serif;
}

#diagrams {
  background-color: lightblue;
  text-align: center;
}

.logo-image {
  vertical-align: middle;
  display: table-cell;
}

.logo-image img {
  max-width: 90%;
  max-height: 90%;
}

＆＃13;

<div id="master" class="container">
  <p>This is a very long sentence. This is a very long sentence. This is a very long sentence.</p>
  <p>
    This is a very long sentence.
    <br/>
    This is a very long sentence.
  </p>
  <div id="diagrams" class="container">
    <div class="logo-image">
      <img id="ssc" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" alt="Placeholder Image" />
    </div>
    <div class="logo-image">
      <img id="msc" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" alt="Placeholder Image" />
    </div>
    <div class="logo-image">
      <img id="asc" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" alt="Placeholder Image "/>
    </div>
  </div>
</div>

＆＃13;

Answer 1

您遇到此问题，因为当您垂直调整窗口大小时，它不会影响 .logo-image div的高度。

您可以在 .logo-image div中使用 vh 属性，如下所示：

.logo-image {
    vertical-align: middle;
    display: table-cell;
    height : 90vh;
}

vh 基本上代表了视口的百分比，所以如果我们将90vh作为高度分配给某个div，则意味着90％的可用视口将作为高度分配给它。

Answer 2

然后你需要调整CSS的第三行并改变“overflow：hidden;”：

body {
    background-color: #CFFFE7;
    /* overflow: hidden; THIS IS YOUR PROBLEM REMOVE IT*/
    /* optional: if above doesn't work, add overflow: scroll; */
    overflow: scroll;
}

您可以像这样隐藏滚动条：

#element::-webkit-scrollbar { 
    display: none; 
}

或隐藏所有滚动条，如下所示：

::-webkit-scrollbar { 
    display: none; 
}

Answer 3

这是我的解决方案版本。如果符合您的要求，请检查结果！

这是一个JSFiddle。

JSFiddle Demo

所做的更改：

Body和html已设置为100vh（仅表示可见屏幕的大小！），正文的默认边距为8px，设置为零。
第二个主要变化是合并box-sizing: border-box;此属性将确保添加的填充包含在元素的总高度中，这对于防止屏幕中的滚动条至关重要。
我添加了一个包含类wrapper和clearfix的div，包装类用于将图像定位在屏幕的中心。 clearfix是因为，当我们使用浮动元素（the images are set to float:left;）时，父级的高度会丢失，这可以通过使用clearfix类
标识为diagram的元素的高度应设置为height:auto，直到容器高度大于窗口高度为止;如果满足此条件，我们需要使用height:80%。这是通过以下媒体查询完成的。

<强> CSS：

#diagrams {
  background-color: lightblue;
  text-align: center;
  height: 80%;
  box-sizing: border-box;
  padding: 10px 10px;
}

@media screen and (min-height: 420px) {
  #diagrams {
    height: auto;
  }
}

以下屏幕高度大于420px，ID diagrams的高度设置为auto，否则设置为80%。

如果还有其他问题，请告诉我。

body,
html {
  background-color: #CFFFE7;
  height: 100vh;
  margin: 0px;
}

#master {
  position: relative;
  padding: 30px 70px 60px 70px;
  box-sizing: border-box;
  height: 100vh;
}

p {
  font-weight: bold;
  font-size: 20px;
  font-size: 2vw;
  font-family: sans-serif;
  height: 10%;
}

#diagrams {
  background-color: lightblue;
  text-align: center;
  height: 80%;
  box-sizing: border-box;
  padding: 10px 10px;
}

@media screen and (min-height: 420px) {
  #diagrams {
    height: auto;
  }
}

.logo-image {
  vertical-align: middle;
  display: inline;
  float: left;
  max-width: 33.33%;
  height: 100%;
}

.logo-image img {
  max-width: 90%;
  max-height: 230px;
  width: auto;
  height: 100%;
}

.wrapper {
  height: 100%;
  display: inline-block;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

* html .clearfix {
  zoom: 1;
}


/* IE6 */

*:first-child+html .clearfix {
  zoom: 1;
}


/* IE7 */

<div id="master" class="container">
  <p>This is a very long sentence. This is a very long sentence. This is a very long sentence.</p>
  <p>
    This is a very long sentence.
    <br/> This is a very long sentence.</p>
  <div id="diagrams" class="container">
    <div class="wrapper clearfix">
      <div class="logo-image">
        <img id="ssc" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" alt="Placeholder Image" />
      </div>
      <div class="logo-image">
        <img id="msc" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" alt="Placeholder Image" />
      </div>
      <div class="logo-image">
        <img id="asc" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" alt="Placeholder Image " />
      </div>
    </div>
  </div>
</div>

即使调整窗口大小，如何显示完整内容？

3 个答案: