Блог

Главная - Вопросы по программированию - как предопределенная высота div, когда его минимальная высота равна 100%

как предопределенная высота div, когда его минимальная высота равна 100%

#html #height #css

#HTML #высота #css

Вопрос:

пожалуйста, посмотрите приведенный ниже html :

 <head runat="server">
    <title></title>
    <style type="text/css">
        html, body
        {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            border: 1px solid red;
        }
        #MainDiv
        {
            width: 100%;
            min-height: 100%;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="MainDiv">
        Contents - A Repeater That Will Grow From Code Behind
    </div>
    </form>
</body>
</html>

как я могу иметь высоту -> 800 пикселей для MainDiv при запуске (низкое содержание)?
и заставьте его высоту увеличиваться при увеличении содержимого!

заранее спасибо

Комментарии:

1. Так много стилей CSS создают иллюзию того, чего вы хотите. Попробуйте повторить фон целиком body . Или используйте fixed div, который имеет 100% высоты окна просмотра.

Ответ №1:

 #MainDiv
{
    min-height: 800px;
    height: auto;
}

Дайте мне знать, если это поможет.

Комментарии:

1. это работает — но есть проблема с html amp; body -> не расти! как заставить их тоже расти?

2. используйте «height: auto;» вместо «height: 100%»

3. спасибо за комментарий / но, делая это, я теряю 100% высоту тела или html — я не хочу никакой прокрутки для своего окна при запуске (из-за использования предопределенной высоты для тела или html)

4. Я не уверен, что понимаю, чего вы хотите: P Если вы установите высоту div равной 800 пикселей, а разрешение вашего экрана меньше 800 пикселей в высоту, вы все равно получите полосу прокрутки. Если вам не нужна полоса прокрутки, просто используйте: «overflow: hidden;». И если вы хотите иметь прокрутку только иногда, вам нужен javascript.

Ответ №2:

напишите так

 #MainDiv{
 min-height:800px;
}

EDIT:

Ответ на ваш комментарий выше

Если вам нужна html amp; body 100% высота, просто напишите так

 html, body{
  height:100%
}

Комментарии:

1. спасибо за ответ / но в вопросе их высота равна 100%, и они не растут с MainDiv!

2. У этого человека есть правильная идея, просто установите для html и body минимальную высоту 100% вместо высоты 100%. Таким образом, сначала он займет весь экран, а затем будет расти вместе с MainDiv.

Метки: