Question

想知道是否有人可以帮助我。我使用以下代码在div中显示内容，但是每当我将数据加载到DIV中时，它都会很好地加载，并出现滚动条。但是，最后的结果总是显示一半。
如果我添加如下所示的间隔符，则可以解决此问题，并且可以滚动到最后一个结果之外。

char path[PATH_MAX];
char cmd[4096 + 2*PATH_MAX];

snprintf(path, sizeof(path), "%s/%s", name, entry->d_name); 
snprintf(cmd, sizeof(cmd), "gcc -c %s -o %s.o", path, path);
if (system(cmd) == 0) {
  printf("Compiled %s to %s.o\n", path, path);
}

但是，这不是很漂亮，所以我的问题是不会显示：flex允许您以某种方式添加200px的底部缓冲区吗？我对https://css-tricks.com/snippets/css/a-guide-to-flexbox/的阅读很好，但是找不到解决方案。

完整代码

<div style="height:300px;"></div

.headerbar {
  background: #333333;
  position: fixed;
  width: 100%;
}

#titlebar {
  width: 90%;
  height: 90px;
  background-image: url(images/logo_new.png);
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
  background-position: 5px 5px;
}

#mainpage {
  display: flex;
  justify-content: flex-start;
  min-width: 100%;
  height: 600px;
  width: 100%;
  position: fixed;
  top: 92px;
}

.leftsidemain {
  background-color: #27383f;
  width: 50%;
  height: 850px;
  flex: 1 0 0;
}

.pagearea {
  background-color: blue;
  width: 50%;
  min-width: 50%;
  min-height: 850px;
  color: #000;
  text-align: left;
  flex: 1 0 0;
  overflow: scroll;
}

Answer 1

您的标头元素（.headerbar）的子元素（#titlebar）设置为height: 90px。设置标题的高度。

您的主要内容元素（#mainpage）设置为height: 600px。好吧，当视口短于690px时，将会溢出屏幕。

尝试使用height: 600px代替height: calc(100vh - 90px)。

还要在父级上设置overflow，以便在子级溢出时激活滚动条。

.headerbar {
  background: #333333;
  position: fixed;
  width: 100%;
}

#titlebar {
  width: 90%;
  height: 90px;
  background-image: url(images/logo_new.png);
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
  background-position: 5px 5px;
}

#mainpage {
  display: flex;
  justify-content: flex-start;
  min-width: 100%;
  /* height: 600px; */
  width: 100%;
  position: fixed;
  top: 92px;
    height: calc(100vh - 90px); /* new */
    overflow: auto;             /* new */
}

.leftsidemain {
  background-color: #27383f;
  width: 50%;
  height: 850px;
  flex: 1 0 0;
}

.pagearea {
  background-color: blue;
  width: 50%;
  min-width: 50%;
  min-height: 850px;
  color: #000;
  text-align: left;
  flex: 1 0 0;
  /* overflow: scroll; */
}

body { margin: 0; }

<div class="headerbar">
  <div id="titlebar"></div>
</div>
<div id="mainpage">
  <div class="leftsidemain"></div>
  <div class="pagearea"></div>
</div>

Answer 2

您不应该将所有元素position:fixed设置为逻辑上不合理的元素，因为不会有滚动行为。保持标题不变。

body {
 margin:0;
}
.headerbar {
  background: #333333;
  position: fixed;
  width: 100%;
  top:0;
}

#titlebar {
  width: 90%;
  height: 90px;
  background-image: url(images/logo_new.png);
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
  background-position: 5px 5px;
}

#mainpage {
  display: flex;
  justify-content: flex-start;
  min-width: 100%;
  height: 600px;
  width: 100%;
  margin-top: 92px;
}

.leftsidemain {
  background-color: #27383f;
  width: 50%;
  height: 850px;
  flex: 1 0 0;
}

.pagearea {
  background-color: blue;
  width: 50%;
  min-width: 50%;
  min-height: 850px;
  color: #000;
  text-align: left;
  flex: 1 0 0;
}

<div class="headerbar">
  <div id="titlebar"></div>
</div>

<div id="mainpage">
  <div class="leftsidemain"></div>
  <div class="pagearea"></div>
</div>

Flex CSS阻止底部内容

2 个答案: