изменить размер div с размером браузера? (Не простой вопрос) - PullRequest
Новая
       29

изменить размер div с размером браузера? (Не простой вопрос)

1 голос
/ 11 сентября 2011

вот мой 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;
}

, и все заканчивается так:

enter image description here

нозначения, которые я использовал для позиционирования элементов, работают только с моим конкретным размером браузера.Как получить #sidemiddle для изменения размера, чтобы заполнить пробел между top.png и bottom.png независимо от размера браузера?Также я могу центрировать текст так, чтобы он оставался в середине фигуры независимо от размера браузера?Спасибо

1 Ответ

0 голосов
/ 11 сентября 2011

На самом деле, похоже, что кто-то понял, как это сделать без JavaScript. Это действительно один огромный хак, так что, вероятно, он имеет некоторые изломы, но вот пример кода, который был использован: 

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

И здесь - результат. Статья содержит более правильный (не хакерский) способ сделать это, но он не работает в IE 7.

По сути, дело в том, чтобы использовать свойства display: table и vertical-align: middle в браузерах, соответствующих стандартам, и прибегать к взлому position в IE. Свойства с символом # перед ними могут быть прочитаны только в Internet Explorer.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...