0

这是我正在使用的 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/

4

1 回答 1

0

为此，您需要 javascript/jQuery 或 CSS hack。我对 CSS hack 做了一个小技巧。它涉及将您的#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%;
于 2013-04-29T01:51:18.903 回答