DIV должен быть по центру по горизонтали и полностью занимает вертикальное пространство

У меня есть что-то похожее на следующую структуру:DIV должен быть по центру по горизонтали и полностью занимает вертикальное пространство

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

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

Я попытался:

html, body{ 
    height: 100%; 
} 
div { 
    position: absolute; 
    top: 8px; 
    bottom: 8px; 
}

Какой штраф за принуждение его покинуть 8px «запас», но центрирования его по горизонтали теперь становится невозможным без использования известково(), так как его ширина является переменной и есть нет элементов для этого относительно.

источник

2013-11-19 jokulmorder

Я надеюсь, что я понимаю ваш вопрос правильно ... ты хочу, чтобы div заполнил все окно, за исключением 8px ... Правильно?

Вы можете сделать это с помощью этого CSS:

div { 
    background: lightblue; 
    position: absolute; 
    top: 8px; 
    left: 8px; 
    bottom: 8px; 
    right: 8px; 
}

Проверьте demo.

[ВАРИАНТ 2]

Если вы хотите ДИВ иметь фиксированную ширину (или полустационарной с max-width или min-width), вы можете использовать этот код:

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 
body { 
    padding: 8px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box;  
} 
div { 
    background: lightblue; 
    width: 300px; 
    margin: 0 auto; 
    height: 100%; 
}

Это говорит тело должно быть 100% высоты и ширины и рассчитать заполнение в пределах его ширины (для этого box-sizing). Затем вы можете указать ширину в div и центрировать ее, используя margin: 0 auto.

Проверьте updated demo.

источник

2013-11-19 20:36:34 LinkinTED

Спасибо, это сработало отлично! – jokulmorder

http://jsfiddle.net/5X79H/1/

следующий код центрирования DIV:

<body> 

<div class="container"> 
    <div class="center"></div> 
</div> 

</body>

стиль:

.center { 
    margin-left: auto; 
    margin-right: auto; 
    display: inline-block; 
    background-color:maroon; 
    width:100px; 
    height: 100px; 
} 
.container{ 
     width:100%; 
    text-align: center; 

}

источник

2013-11-19 20:21:04

Это оставляет div слева для меня: http://jsfiddle.net/vnrc7/ – jokulmorder

проверить это сейчас –

Вы можете использовать маржу:

div { 
    margin: 0 auto; 
}

источник

2013-11-19 20:22:26 ValleyDigital

div{ 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
}

по центру Div

UPDATE: удалить позицию: абсолютная; FIDDLE

источник

2013-11-19 20:24:34 user2249160

проблема в том, что он будет идеально по центру, но он должен занимать всю вертикаль доступное пространство (за исключением 8px сверху и снизу) – jokulmorder

Я думаю, что лучше ввести новый DIV:

<body> 

<div class="container"> 
    <div class="center"></div> 
</div> 

</body>

Тогда в вашем CSS вы можете сделать это:

.container { 
    position: absolute; 
    top: 8px; 
    bottom: 8px; 
    left: 0; 
    right: 0; 
} 
.center { 
    margin: 0 auto; 
}

источник

2013-11-19 20:34:11 meavo

DIV должен быть по центру по горизонтали и полностью занимает вертикальное пространство

ответ

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