Question

我需要在vanilla html + css中解决一些任务 - 基于桌面浏览器的应用程序的bootstrap代码。所以，我不能使用诸如jQuery或Ext。

之类的库

有三个盒子的容器'包装' - '标题'，'窗格'，'内容'。我需要以下 - 包装和所有三个盒子总是适合单个屏幕，并采取100％的高度/宽度标题将是一个工具栏，窗格是一个固定的高度框。内容占据屏幕的其余部分。

我无法让内容适合页面的其余部分。有谁能够帮我？另一个问题 - 我需要在窗格和内容中有testarea。当然，有很多这样的控制，但我不能使用它们，因为这是自举代码。

我创建了示例页面：http://jsfiddle.net/madhollander/6r4nu/

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>filterIt</title>
<style>
#wrapper
{
position:absolute;
top:0px;
left:0px;
right:0;
bottom:0px;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}

#header
{
    display: -webkit-box;
    width:100%;
    background-color:blue;
    -webkit-box-orient:vertical;
}
#pane
{
    display: -webkit-box;
    width:100%;
    height:100px;
    background-color:black;
    -webkit-box-flex: 1;
    -webkit-box-orient:vertical;
}

#content
{
    display: -webkit-box;
    width:100%;
    background-color:green;
    overflow-x: scroll;
    overflow-y: scroll;
    -webkit-box-flex: 1;
    -webkit-box-orient:vertical;
}
.textbox{
    width:100%;
    display:block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    resize:none;
    overflow-x: scroll;
    overflow-y: scroll;
}
</style>

</head>
<body onload='onload();run();'>
<div id='wrapper'>
    <div id='header'>
    <button type="button">Apply</button>

    </div>

    <div id='pane'>
        <textarea class="textbox" id="command" wrap="off">command sample</textarea>

    </div>

    <div id='content'>
        <textarea class="textbox" wrap="off" id='log'>log sample</textarea>
    </div>
</div>
</body>
</html>

Answer 1

您只是错误地使用Flexbox模块。某些属性仅适用于Flex容器，其他属性仅适用于Flex项目。除非您还使用现代属性，否则永远不会使用旧的Flexbox属性。

http://codepen.io/cimmanon/pen/DcesF

#wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0;
  bottom: 0px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

#header {
  width: 100%;
  background-color: blue;
}

#pane {
  width: 100%;
  height: 100px;
  background-color: black;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1 1;
  -ms-flex: 1 1;
  flex: 1 1;
}

#content {
  width: 100%;
  background-color: green;
  overflow-x: scroll;
  overflow-y: scroll;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1 1;
  -ms-flex: 1 1;
  flex: 1 1;
}

.textbox {
  width: 100%;
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  resize: none;
  overflow-x: scroll;
  overflow-y: scroll;
}

Answer 2

您可以采取的措施是将#wrapper设置为height: 100%;

这将它拉伸到身体的高度（你也应该设置为100% - 因为有些浏览器会处理与其他浏览器不同的高度）

此外，您可以为每个元素设置一个百分比，您可以随时根据自己的喜好进行更改，当然您应该设置min-height而不是height，否则您的元素会溢出并导致布局故障

您的页面将如下所示：

http://jsfiddle.net/6r4nu/1/

Answer 3

我不确定我是否正确理解了你的问题，但无论如何你都去了：如果你需要三个div来垂直填充页面，你只需要给你的包装器（和更多的父元素）高度100％。然后填充页面，每个div的高度为33.3％。像这样：

#wrapper{
height:100%;
}
#header, #content, #pane{
height:33.3%
}

如果它们不应该同样高，只需重新计算百分比，使它们加起来为100％。

灵活的垂直html布局

3 个答案: