Моя проблема полягає в тому, що мій фоновий контейнер євідображається лише до нижньої частини екрана. Я не бачу цього в частині після цього. Я спробував майже все, але, здається, нічого не працює для мене. Я хочу, щоб це було налаштовано відповідно до розміру сторінки.
<body>
<div id="profilebg">
<!-- Other divs -->
</div>
</body>
І мій CSS є
html, body {
height:100%;
}
#profilebg
{
position: absolute;
margin-left:10%;
margin-right:10%;
width:80%;
background-color:#ffffff;
height: 100%;
top: 0;
bottom: 0;
display: block;
}
Відповіді:
2 для відповіді № 1Якщо ви не вказуєте висоту, вона за замовчуванням має значення "авто", що визначається висотою вмісту.
Якщо ви щось розміщуєте всередині вмісту, обов’язково додайте елемент зі стилем ccs clear:both щоб батько міг правильно визначити його зріст.
Подібним чином, якщо використовує будь-який дочірній елемент елементаабсолютне позиціонування, воно не зможе автоматично визначити свою висоту, оскільки абсолютно дочірня дочірня особа перебуває не в тій же області, що і батьківська.
Зразком стилю роботи буде:
html, body {
height:100%;
}
#profilebg
{
margin: 0 10%;
background-color:#ffffff;
}
Редагувати: Більш стислі стилі CSS - ширина зайва з полями
Редагувати 2: Додайте рядок про абсолютне позиціонування
Редагувати 3: Структура розділу для отримання запиту в коментарях нижче:
<div id="page-container">
<div id="header-container">
<!-- Put your header here -->
</div>
<div id="body-container">
<div id="profilebg">
<!-- Profile BG Container -->
</div>
<!-- Any other body content here -->
</div>
<div id="footer-container">
<!-- Footer content here -->
</div>
</div>
0 для відповіді № 2
Нижче, здається, працює на те, чого ви хочете досягти. Я видалив bottom:0; і змінено height до min-height.
html, body {
height:100%;
}
#profilebg {
position: absolute;
margin-left:10%;
margin-right:10%;
width:80%;
min-height:100%;
background-color:#ffffff;
top: 0;
display: block;
}
РЕДАГУВАТИ Ось а скрипка
EDIT 2 Ось а скрипка з відносним позиціонуванням.