как измерить высоту отделения к ее контейнерной высоте, с помощью CSS?

Question

как измерить высоту отделения к ее контейнерной высоте, с помощью CSS?

Парадигма главного release.minor release.bug фиксация довольно распространена, я думаю.

В некоторых контрактах на поддержку предприятия существует $$$ (или ответственность нарушения условий контракта) связан с тем, как конкретный выпуск определяется. Контракт, например, мог бы дать право клиенту на некоторое количество главных версий в промежуток времени или обещать, что будут меньше, чем x количество незначительных выпусков в период, или что поддержка продолжит быть доступной для такого количества выпусков. Конечно, неважно, сколько слов вставляется к контракту для объяснения, что главная версия по сравнению с незначительным выпуском, это всегда субъективно и всегда будут серые области вЂ “, ведущие к возможности, что поставщик программного обеспечения может играть система для избиения таких договорных условий.

9

html css css3

задан rahul 10 December 2009 в 13:42

9 ответов

Другие вопросы по тегам:

html css css3

Похожие вопросы:

score 0 · Answer 1

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

<!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>
 <title>100% Test</title>
 <style type="text/css">

   html, body, #inner { height: 100% }
   #inner { border: 4px blue solid } 
   #container { height: 200px; border: 4px red solid }

 </style>
</head>
<body>

    <div id="container">
        <div id="inner">
            lorem ipsum
        </div>
    </div>

</body>
</html>

score 2 · Answer 2

Вы можете указать контейнеру div отображать как таблицу, а внутренний div отображать как ячейку таблицы.

HTML

<body>
<div id="wrap">
    <div id="header">
        <h1>
            My Header</h1>
    </div>
    <div id="main">
        <ul id="nav">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
        </ul>
        <div id="primaryContent">

        </div>
    </div>
    <div id="footer">
        <h1>
            My Footer</h1>
    </div>
</div>

CSS

#wrap
{
    width: 800px;
    margin: auto;
}

#header
{
    background: red;
}

#main
{
    display: table;
}

#nav
{
    background: gray;
    width: 150px;
    display: table-cell;
}

#primaryContent
{
    background: yellow;
    padding: 0 .5em;
    display: table-cell;
}

Исправления для IE

    #wrap 
{
    width: 800px;
    margin: auto;
}

#header, #footer
{
    background: red;
}

#main 
{
    background: url(../bg.png) repeat-y;
}

#nav 
{
    background: gray;
    width: 150px;
    float: left;
}

#primaryContent 
{
    background: yellow;
    margin-left: 150px;
    padding: 0 .5em;
}

score 2 · Answer 3

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

score 1 · Answer 4

Это непростая задача - четкого лучшего подхода не существует, но есть несколько распространенных. Если мы предполагаем, что вам ДЕЙСТВИТЕЛЬНО нужно, чтобы высота правого столбца была (или казалась) эквивалентной высоте левого столбца, вы можете использовать любой из методов, часто используемых для получения столбцов одинаковой высоты. Эта статья содержит несколько приемов, позволяющих добиться правильного внешнего вида и поведения. Я рекомендую прочитать его, чтобы увидеть, решит ли он вашу проблему.

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

score 3 · Answer 5

Если я правильно понимаю, и высота по умолчанию для div, где высота не указана, является auto, это невозможно без явной установки высоты для содержащего div. Если для содержащего div задана явная высота, то height: 100% для содержащегося div будет означать, что он увеличивается до высоты контейнера.

score -3 · Answer 6

Не могли бы вы установить высоту содержащегося элемента как height: 100%;

-3

ответ дан 4 December 2019 в 09:36

score 8 · Answer 7

Вы можете либо:

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

или

написать 3 строки грязных семантически некорректных и дьявол сделал стол, и он отлично работает везде

Ваш выбор :)

score 7 · Answer 8

Есть способ сделать это, ЕСЛИ вы используете jQuery. Поскольку вы просили CSS, этот вариант может быть недоступен для вас, но если вы можете его использовать, он будет делать именно то, что вы хотите.

$(divToResize).css('height',$(container).innerHeight());

$ (divToResize) - это селектор для DIV, который вы хотите сопоставить с его высотой. container, а $ (container) логически является контейнером, высоту которого вы хотите получить.

Это будет работать независимо от того, указана ли высота контейнера в CSS или нет.

score 0 · Answer 9

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.container{
    position:relative;
    background-color:#999;
}
#to-be-sized{
    position:absolute;
    top:0;
    height:100%;
    background-color:#ddd;
}
</style>
<body>

<div class='container'>
    <br>
    &nbsp;&nbsp;
    <div style='display: block; height: 500px'>left</div>
    <br>
    &nbsp;&nbsp;
    <div id='to-be-sized' >right</div><br>
</div>

</body>
</html>