resizing a div with browser size? (Not an easy question)_问答_开发者

resizing a div with browser size? (Not an easy question)

开发者 https://www.devze.com 2023-04-04 14:11 出处：网络

here is my html <div id=\"sidetop\"><div> <div id=\"sidemiddle\"><div> <div id=\"sidebottom\"></div>

here is my html

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

and my 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;
 开发者_如何学Python   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;
}

and it ends up like this

resizing a div with browser size? (Not an easy question)

but the values that ive used to position the elements only work with my specific browser size. How can I get #sidemiddle to resize to fill the gap between the top.png and the bottom.png regardless of the browser size? Also can I centre the text so that it stays in the middle of the shape regardless of browser size? Thanks

Actually, it looks like someone has figured out how to do this without JavaScript. It's really one huge hack, so it probably has some kinks, but here's the example code that was used:

<!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>

And here is the result. The article includes a more valid (non-hacky) way of doing it, but it doesn't work in IE 7.

Basically, the point is to use the display: table and vertical-align: middle properties on standards-compliant browsers, and resort to position hacks on IE. The properties with the # symbol before them can only be read by Internet Explorer.