HTML 100% высоты с 200px нижним полем? - PullRequest
Новая
       17

HTML 100% высоты с 200px нижним полем?

4 голосов
/ 01 ноября 2010

пожалуйста, может ли какой-нибудь гениальный человек помочь мне с этим макетом страницы или скажите, если это возможно?

Попытка встроить некоторый флэш-контент, который изменяется в браузере, но имеет поле 400px слева и поле 200px снизу. Вам удалось получить поле слева, но не удалось получить нижнее поле, чтобы остаться в браузере.

Мой div выглядит так: 

<div style="height:100%;margin-left:400px;">
    <div id="flashcontent"></div>
</div>

SWF динамически внедряется с swfobject в div содержимого flashcontent. Любая помощь с этим будет принята с благодарностью.

Mike

Ответы [ 3 ]

5 голосов
/ 01 ноября 2010

Если вы можете позволить себе не поддерживать IE6, я думаю, вы могли бы работать с position: fixed.

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

<div style="position: fixed; left: 400px; top: 0px; right: 0px; bottom: 200px;">
    <div id="flashcontent"></div>
</div>

Я не могу проверить это прямо сейчас, но теперь flashcontent div должен иметь возможность изменять размеры в соответствии с внешним div.

2 голосов
/ 01 ноября 2010 
<!-- This comment makes IE render in quirks mode.. We want IE in quirks mode -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Untitled</title>
<style type="text/css">
html,body {
    margin:0;
    padding:0;
    height:100%;
}
.flash-container {
    height:100%;
    background-color: #f00;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding:0 0 200px 400px;
}
.flash {
    background-color: #fff;
    width:100%;
    height:100%;
}
</style>
</head>
<body>
<div class="flash-container">
    <div class="flash">
        ...Replace this Div with Flash
    </div>
</div>
</body>
</html>
1 голос
/ 01 ноября 2010

Ответ Пеккас довольно хороший, я не рассматривал вариант установки всех ребер.Но я также сделал это настольное предложение, которое должно работать практически во всех браузерах с незапамятных времен. 

<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;"> 
<body style="padding:0;margin:0;height:100%;">
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
    <td style="width:400px;">1</td>
    <td style="background-color:red;">2</td>
</tr>
<tr style="height:200px;">
    <td>3</td>
    <td>4</td>
</tr>
</table>
</body>
</html>
...