2010-11-01 4 views
4

пожалуйста, какой-нибудь блестящий человек поможет мне с этой страницей или скажите, если это возможно?html Высота 100% с нижним краем 200px?

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

Мой ДИВ выглядит следующим образом:

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

SWF-врезан с SWFObject в flashcontent динамически деление с, Любая помощь с этим было бы весьма признателен.

Майк

+0

пытаются плавать DIV и посмотреть, что происходит – ArK

+0

Привет, спасибо за ответ, пытался добавить поплавка в DIV, но теперь содержимое флэш крошечное (около 100px X 100px) и не наценка на дне , Есть идеи? – mike

ответ

5

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

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

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

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

+0

Wow, thats brilliant, это сводит меня с ума, знаете ли вы об обходном пути для IE6? Был бы готов получить что-то в вашем списке желаний. Большое спасибо в любом случае – mike

+0

@mike mmm, вы можете попробовать 'position: absolute' вместо' fixed'. Это тоже должно работать, если ваши элементы 'html' и' body' на 100% высоки, и документ не простирается за нижнюю границу (т. Е. Ровно на 100%). Дайте обратную связь, если она не сработает. Получение мне чего-то из моего списка пожеланий полностью добровольное, но всегда приветствуем! :) –

+0

Будет тестировать IE6, но не может вас поблагодарить, будет держать вас в курсе. Cheers – mike

1

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

<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> 
+0

Привет, Сванд, спасибо за ответ, но основное содержание - встроенный swf, попробовал ваш код, но в IE8 дно выходит за пределы браузера, а в Chrome снизу отлично, но он выдает squf swf. Есть идеи? Майк – mike

+0

Ух! Использование таблиц для макета - это поесть в McDonalds каждый день: он работает коротко, но вы в конечном итоге умираете с жиром. – xPheRe

+0

@xPheRe Знание того, что это такое, по-прежнему является мощным инструментом, вы можете отказаться, если CSS не дает вам хорошего решения или требует очень кровоточащего края, что, возможно, недоступно. Ничего плохого, зная, что такое Макдональдс, и есть там бургер один раз в год;) – Svend

2
<!-- 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> 
+0

Большое вам спасибо, это потрясающее решение – mike

Смежные вопросы