css Как сделать так, чтобы тело страницы оставалось одинакового размера, даже если я добавляю к нему элемент?

Question

css Как сделать так, чтобы тело страницы оставалось одинакового размера, даже если я добавляю к нему элемент?

0

У меня есть страница, и я хочу настроить свое тело на 100%, поэтому он не может принимать размер экрана, а внутри тела есть основной контейнер-контейнер, вес и высота которого составляют 90% тела.

Теперь, каждый раз, когда я пытался добавить div (LoginInnerContainer) внутри и хочу, чтобы div до 30% от корневого div и посередине, по какой-то причине тело становится длиннее, а внутренний контейнер не попадает посередине.

Почему это происходит и как я могу это решить, сохраняя при этом размер экрана? Жаль, что у меня недостаточно репутации, чтобы опубликовать фотографию, чтобы понять, что я говорю.

Здесь мой HMTL-код

<html>
          <head>
             <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
              <link rel="stylesheet" href="<?php URL?> public/css/default.css">
              <title></title>
           </head>
           <body>
             <div id="mainContainer">
                 <header>

                </header>

                     <div id="loginInnerContainer">
                          <div id="loginLogoContainer"></div>
                          <div id="loginFormContainer"></div>
                     </div>
            </body>
 </html>

и там мой CSS пока, но #loginInnerContainer посередине, и страница становится длиннее, чем мне это нужно.

#mainContainer { 
/*    height: 590px;*/
    height: 90%;
    width: 90%;
    background-color: white;
    margin: 50px;

}
html, body{
    height: 100%;
}

html {
    background-image:url('../images/wood-dark.png');
    height: 100%;
}
body {
    width: 100%;
    min-height:100%;
    display: block;

}
#loginMainContainer{
    height: 100%;
    padding:auto 0;
}

#loginInnerContainer{
    background-color:blue;
    width: 100%;
    height: 30%;
    margin:auto 0 auto 0;

}

adlescouflair 03 окт. 2013, в 15:40

Источник

Теги:

html

css

1 ответ

Ещё вопросы

nkmol · Accepted Answer · 2013-10-03T10-59-00.000Z

прежде всего, я бы сбросил границу и отступы всей страницы:

*
{
  margin: 0;
  padding: 0;
}

Больше информации.
Таким образом, будут сброшены некоторые пометки и поля по умолчанию.

Следующая вещь заключается в том, что вы используете margin для своего #loginInnerContainer. Маржа всегда находится вне контейнера, для этого вы хотите использовать отступы. Больше информации здесь.
Хотя страница по-прежнему будет больше по мере необходимости...

Это связано с тем, что ваше дополнение также расширяет контейнер.
Чтобы исключить это, вы можете использовать box-sizing.
Теперь вы также можете установить ширину и высоту на 100% экрана, не обращая внимания на заполнение.

jsFiddle

Надеюсь, это помогло вам :)

На самом деле это помогло мне понять, что происходит, но на самом деле я использовал этот #loginInnerContainer {background-color: blue; ширина: 90%; высота: 30%; положение: абсолютное; верх: 0; низ: 0; поле: авто 0; }
И это помогает мне с остальной частью проекта, спасибо