Moim problemem jest to, że mój kontener tła jestwyświetlane tylko do dołu ekranu. Nie widzę tego później w tej części. Próbowałem prawie wszystkiego, ale nic nie działa dla mnie. Chcę, aby dopasowano go do rozmiaru strony.
<body>
<div id="profilebg">
<!-- Other divs -->
</div>
</body>
A mój CSS jest
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;
}
Odpowiedzi:
2 dla odpowiedzi № 1Jeśli nie określisz wysokości, domyślnie jest to „auto”, które zależy od wysokości zawartości.
Jeśli coś pływasz w treści, dodaj element ze stylem ccs clear:both aby rodzic mógł prawidłowo określić jego wysokość.
Podobnie, jeśli korzysta z niego dowolne dziecko elementupozycjonowanie bezwzględne, nie będzie w stanie automatycznie określić jego wysokości, ponieważ dziecko pozycjonowane bezwzględnie nie jest już w tym samym zakresie co rodzic.
Przykładowy styl pracy to:
html, body {
height:100%;
}
#profilebg
{
margin: 0 10%;
background-color:#ffffff;
}
Edytować: Bardziej zwięzłe style CSS - szerokość jest zbędna przy marginesach
Edytuj 2: Dodaj linię o pozycjonowaniu bezwzględnym
Edytuj 3: Struktura Div, aby uzyskać wniosek w poniższych komentarzach:
<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 dla odpowiedzi nr 2
Poniżej wydaje się, że działa to, co chcesz osiągnąć. Usunąłem bottom:0; i zmienione height do 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;
}
EDYTOWAĆ Tutaj jest skrzypce
EDYTUJ 2 Tutaj jest skrzypce z pozycjonowaniem względnym.