Как я могу создать поведение двухкадрового горизонтального мозаичного набора кадров с помощью divs / css? - PullRequest
Новая
       0

Как я могу создать поведение двухкадрового горизонтального мозаичного набора кадров с помощью divs / css?

2 голосов
/ 31 декабря 2011

Я пытаюсь выложить веб-страницу следующим образом: 

|-----------------------|
| header (fixed)        | <- no scroll bar
|-----------------------|
| body                | |
|                     | |
|                     | | <- scroll bar
|                     | |
|                     | |
|                     | |
|                     | |
| ... continues ...   | |
| ... so requires ... | |
| ... scroll bar ...  | |
|---------------------|-|

В старые старые времена я делал это с помощью набора кадров. Я не хочу идти по этому пути по нескольким причинам (включая устаревший).

В прежние времена я думал, что сделал это, используя таблицу высоты = 100% с двумя строками в виде всего тела страницы, а стиль переполнения установил скрытый / автоматический в разных местах, чтобы получить В нижней строке есть полоса прокрутки для содержимого главной страницы. Я бы согласился с этим в качестве решения, но я не могу вспомнить, как правильно его настроить (я уверен, что для этого нужно установить правильные элементы страницы в положение: относительное или что-то в этом роде, но я стучал моя голова на клавиатуре в течение двух часов пытается заставить ее работать, поэтому я сдаюсь).

Я читал, что все, что вы можете делать с фреймами / таблицами, вы можете делать с правильными div и css, поэтому я бы очень хотел, чтобы кто-то показал мне это решение.

Также обратите внимание: я хочу, чтобы полоса прокрутки отображалась только при необходимости на основе содержимого (согласно переполнению: авто), а не постоянно (переполнение: прокрутка).

Ответы [ 2 ]

1 голос
/ 31 декабря 2011

Вот полностью работоспособное решение для прокручиваемого содержимого вашей проблемы в абсолютно позиционированном заголовке без других полос прокрутки в окне браузера. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Scrollable 100% high element</title>
<style type="text/css">
* {margin:0;padding:0}
p{margin:0 0 1em 0}
html,body{margin:0;padding:0}
body{
    height:100%;
}
html>body{
    position:absolute;
    width:100%;
}
#content{
    background:#d2da9c;
    overflow:auto;
    position:absolute;
    width:100%;

    left:0;
    top:100px;
    bottom:0;
}

#top{
    position:absolute;
    left:0;
    width:100%;
    top:0px;
    height:100px;
    background:red;
    overflow:hidden;
}
</style>
</head>
<body>
<div id="wrap">
    <div id="content">
        <p>Start</p>
        <p>test</p>
        <p>test</p>
    </div>
</div>
<div id="top">
    <h1>Header</h1>
</div>
</body>
</html>
1 голос
/ 31 декабря 2011

Это простой способ сделать фиксированный заголовок, он становится немного более сложным, если вы хотите также сделать фиксированный нижний колонтитул. Это должно работать для вас, хотя. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <style type="text/css">
     body{
      margin:0;
      padding:0;
      position:relative;
     }
     body, html, #wrapper {
        height:100%;
        position:relative;
     }
     #header{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100px;
      background-color:yellow
     }
     #wrapper {
        height:100%;
        padding-top:100px;
     }
    #content{
        overflow:auto;
        height:100%;
    }

    </style>
    </head>
    <body>
    <div id="header"> header </div>
    <div id="wrapper">
        <div id="content"> 
            <p>content </p>

        </div>
    </div>
</body>
</html>

Это немного лучше, нам просто нужно избавиться от расстояния внизу, чтобы полностью удалить крайнюю правую полосу прокрутки.

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

Похожие темы

...