Question

这是我正在使用的HTML代码：

<div id="header">123</div>
<div id="editorcontent">
    <div id="ta_a"><textarea style="resize: none;"><? echo $t1; ?></textarea></div>
    <div id="ta_c"><textarea style="resize: none;"><? echo $t2; ?></textarea></div>
    <div id="centerinfo">CONTENT 1</div>
    <div id="clear"></div>
    <div id="centerinfo">CONTENT 2</div>
    <div id="ta_b"><textarea style="resize: none;"><? echo $u1; ?></textarea></div>
    <div id="ta_d"><textarea style="resize: none;"><? echo $u2; ?></textarea></div>
</div>

和CSS：

#editorcontent {
  min-height: 400px;
  min-width: 800px;
  overflow: hidden;
  position: relative;
  height: auto;
  width: 100%;
}

#ta_a {
  position: relative;
  width: 40%;
  height: 50%;
  float: left;
}

#ta_c {
  position: relative;
  width: 40%;
  height: 50%;
  float: right;
}

#ta_b {
  position: relative;
  width: 40%;
  height: 50%;
  float: left;
}

#ta_d {
  position: relative;
  width: 40%;
  height: 50%;
  float: right;
}
#centerinfo {
  text-align: center;
  position: relative;
  width: 19.6%;
  height: 40%;
  display: inline-block;
}
#clear {
  clear:both;
  min-height: 10px;
}
#header {
  height: 44px;
  background: #D00000;
}

问题是，textareas的2倍50％并没有看到标题导致页面总是太高......

小提琴 http://jsfiddle.net/5SD2U/

Answer 1

要实现这一点，您需要javascript / jQuery或CSS hack。我弄乱了CSS黑客。它涉及将#editorcontent div设置为100％，添加header_placeholder div，并将标题的位置设置为绝对值。另请注意，您始终必须手动将标题和占位符的高度设置为相同的数字。

此外，您必须将body和html设置为padding：0，margin：0，width：100％和height：100％，否则这可能不适用于所有浏览器。

这是工作小提琴： http://jsfiddle.net/5SD2U/1/

以下是供参考的代码： HTML：

<div id="header">123</div>
<div id="editorcontent">
    <div id="header_placeholder"></div>
    <div id="ta_a"><textarea style="resize: none;">1</textarea></div>
    <div id="ta_c"><textarea style="resize: none;">2</textarea></div>
    <div id="centerinfo">CONTENT 1</div>
    <div id="clear"></div>
    <div id="centerinfo">CONTENT 2</div>
    <div id="ta_b"><textarea style="resize: none;">3</textarea></div>
    <div id="ta_d"><textarea style="resize: none;">4</textarea></div>
</div>

和CSS

body, html {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
#editorcontent {
  height: 100%;
  min-width: 800px;
  overflow: hidden;
  position: relative;
  height: auto;
  width: 100%;
}
#header_placeholder {
    height: 44px; /* height of the header */
}
#ta_a {
  position: relative;
  width: 40%;
  height: 50%;
  float: left;
}

#ta_c {
  position: relative;
  width: 40%;
  height: 50%;
  float: right;
}

#ta_b {
  position: relative;
  width: 40%;
  height: 50%;
  float: left;
}

#ta_d {
  position: relative;
  width: 40%;
  height: 50%;
  float: right;
}
#centerinfo {
  text-align: center;
  position: relative;
  width: 19.6%;
  height: 40%;
  display: inline-block;
}
#clear {
  clear:both;
  min-height: 10px;
}
#header {
  height: 44px;
  background: #D00000;
    position: absolute;
    width: 100%;

div中的CSS HTML textarea divs max height minus header

1 个答案: