全高度流体布局与可编辑的Textfield [英] Full-height fluid Layout with editable Textfield

问题描述

我一直在思考这个谜语多年，我不能相信这样简单的布局不是用一个简单的html + css解决。因此，我会在周末将这一个传递给您; - ）

希望的结果

（心理模式：notepad.exe ...）

  + --------- ------------------------------------------ + 
 |高度取决于静态内容。 | 
 |此部分始终保持可见。 | 
 + --------------------------------------------- ------ + 
 |高度正好填满剩余高度。 | 
 |这部分（只有！）滚动如果内容更长！ | 
 | （这部分将是contenteditable）| 
 + --------------------------------------------- ------ + 
 |高度取决于静态内容。 | 
 |此部分始终保持可见。 | 
 + --------------------------------------------- ------ + 
  

要求：

• 没有javascript（因为这是我目前不满意的解决方案）


• 纯CSS + HTML


• （无Flexbox！）


• 页眉和页脚的高度未知（这很遗憾不会工作）。

strong>

解决方案

你可能不喜欢这个答案，但是我知道满足所有标准的唯一方法是使用表

HTML

 < table class = > 
< tr class =header> 
< td>标题在这里
 
< tr> 
< td> 
< div class =container> 
< div class =content> 
内容来到这里。 
< / div> 
< / div> 
 
< tr class =footer> 
< td>页脚到这里
< / table> 
  

CSS

整个视口：

  .layout {
 position：fixed; 
 top：0px; 
 left：0px; 
 height：100％; 
 width：100％; 
} 
  

因为表格的高度为100％，所以满足高度。此样式阻止它伸展页眉和页脚行：

  .header，.footer {
 height：0px; 
} 
  

这种风格仅适用于Firefox：

  tr {
 height：100％; 
} 
  

在所有浏览器在 td 上。我把它放在 div ，所以它将与IE工作：

  .container {
 position：relative; 
 height：100％; 
} 
  

现在我们有一个具有相对定位的容器，我们可以应用绝对定位100％高度并溢出其内容：

  .content {
 overflow：auto; 
 position：absolute; 
 height：100％; 
} 
  

在IE11，Chrome，Firefox，Opera和Safari中测试。 >

小提琴

I have been pondering this riddle for years, and I can't believe such a simple layout isn't solved with a simple piece of html+css. So I'll pass this one on to you for the weekend ;-)

Desired Result

(mental model: notepad.exe...)

+---------------------------------------------------+
| height depends on static content.                 |
| This Part always stays visible.                   |
+---------------------------------------------------+
| height exactly fills up remaining height.         |
| this part (ONLY!) scrolls if content is longer!   |
| (this part will be contenteditable)               |
+---------------------------------------------------+
| height depends on static content.                 |
| This Part always stays visible.                   |
+---------------------------------------------------+

Requirements:

• no javascript ('cause that is my current unsatisfactory solution)
• pure CSS + HTML
• as cross-browser compatible and gracefully degradable as possible (no flexbox!)
• The height of the header and footer is unknown (this sadly won't work).

How can I do it?

解决方案

You may not like the answer, but the only way I know to meet all your criteria is by using a table for layout.

HTML

<table class="layout">
  <tr class="header">
    <td>Header goes here

  <tr>
    <td>
      <div class="container">
        <div class="content">
          Content goes here.
        </div>
      </div>

  <tr class="footer">
    <td>Footer goes here
</table>

CSS

The table takes up the entire viewport:

.layout {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}

Because the table has 100% height, it will stretch all rows as needed to meet the height. This style prevents it from stretching the header and footer rows:

.header, .footer {
  height: 0px;
}

This style is needed for Firefox only:

tr {
  height: 100%;
}

In all browsers except IE, this style works on the td. I've put it in a div so it will work with IE:

.container {
  position: relative;
  height: 100%;
}

Now that we have a container with relative positioning, we can apply absolute positioning with 100% height and overflow on its content:

.content {
  overflow: auto;
  position: absolute;
  height: 100%;
}

Tested in IE11, Chrome, Firefox, Opera, and Safari.

Fiddle

这篇关于全高度流体布局与可编辑的Textfield的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！