用浏览器大小调整 div 的大小？（不是一个简单的问题）答案

【问题标题】：resizing a div with browser size? (Not an easy question)用浏览器大小调整 div 的大小？（不是一个简单的问题）
【发布时间】：2011-11-14 15:19:52
【问题描述】：

这是我的html

<div id="sidetop"><div>
<div id="sidemiddle"><div>
<div id="sidebottom"></div>
<span class="logotext">wegbweifgnqweilgnqwleing</span>

还有我的css

body {
color: #333333;
font-family: Arial, Helvetica, sans-serif;
}

#sidetop {
    background: url(images/top.png);
    top:0px;
    width: 40px;
    height: 59px;
    left: 0px;
    position: fixed;
}

#sidebottom {
    background: url(images/bottom.png);
    bottom:0px;
    width: 40px;
    height: 59px;
    left: 0px;
    position: fixed;
}

#sidemiddle {
    background: #000;
    top: 59px;
    bottom: 59px;
    height: 86.3%;
    width: 40px;
    position: fixed;
    left: 0px;
}

.logotext {
    display: block;
    width: 730px;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg);
    font-size:35px;
    letter-spacing:0.2em;
    margin-top:325px;
    position:absolute;
    top:0;
    left:-347px;
    color: #fff;
}

结果是这样的

但我用来定位元素的值仅适用于我的特定浏览器大小。无论浏览器大小如何，如何让#sidemiddle 调整大小以填补 top.png 和 bottom.png 之间的空白？我也可以将文本居中以使其保持在形状的中间而不管浏览器大小如何？谢谢

【问题讨论】：

你说得对，这不是一个简单的问题。我个人会为此使用 JavaScript。
我不擅长 javascript。你能把我链接到可能做这项工作的东西吗？谢谢

标签： css browser html resize

【解决方案1】：

实际上，看起来有人在没有 JavaScript 的情况下拥有 figured out how to do this。这确实是一个巨大的 hack，所以它可能有一些问题，但这里是使用的示例代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Universal vertical center with CSS</title>
  <style>
    .greenBorder {border: 1px solid green;} /* just borders to see it */
  </style>
</head>

<body>
  <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="greenBorder" style=" #position: relative; #top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
  </div>
</body>
</html>

here 就是结果。这篇文章包含了一种更有效（非 hacky）的方法，但它在 IE 7 中不起作用。

基本上，关键是在符合标准的浏览器上使用display: table 和vertical-align: middle 属性，并在IE 上使用position hacks。前面带有# 符号的属性只能由 Internet Explorer 读取。

【讨论】：