Jak nakładać obrazy tła, rozwijając puste znaczniki?

Question

Chcę warstwować obrazy tła, aby uzyskać ładny efekt z obramowaniem.

Myślę, że mój kod jest dość prosty, ale problem, który mam, polega na tym, że tagi nie chcą się poprawnie rozwijać. Wyjaśnię więcej później. Oto html:

    <!doctype html>

    <html>
        <head>


        <title>My blog</title>
            <link rel="stylesheet" type="text/css" href="webdev.css"/>  
        </head>

        <body class='body'>
            <div class='outer'>
                <div class='inner'>
</div>
            </div>
        </body>

    </html>

Arkusz stylów:

  .body
{
    min-height:100%;
    width:100%;
    margin-top:0px;
    overflow: hidden;
    display: inline-block;
    display: block;
}

.outer
{
    min-height:100%;
    width:100%;
    overflow: hidden;
    display: inline-block;
    display: block;
}

.inner
{
    min-height:100%;
    width:100%;
}

Nie jestem w 100% pewien, czy poprawki są jeszcze konieczne. Zasadniczo chcę, aby wszystkie div zawierały cały ekran, bez względu na jego rozmiar. Dzięki za wszelkie odpowiedzi. Jeśli nie mam jasności, śmiało skomentuj i wyjaśnię więcej, ale myślę, że pytanie jest dość podstawowe.

html css size

0

Eric Thoma 12 sierpień 2011, 23:42

Answer 1

Spróbuj tego:

body
{
    height:100%;
}

.outer
{
    height:100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}

.inner
{
    height:100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}

1

Leah 13 sierpień 2011, 01:03

Answer 2

Ustawienie szerokości 100% jest tak proste, jak ustawienie „szerokość: 100%”, wysokość jest nieco trudniejsza.

Musisz mieć „wysokość: 100%” zarówno na tagu <html>, jak i <body>. A potem „wysokość: auto; wysokość: 100%; min-wysokość: 100%;” na Twoich <div>

Powodem, dla którego masz dwie „wysokość”, jest to, że IE6 nie rozumie „wysokości: auto”, a zamiast tego potrzebuje „wysokość: 100%”.

Przykład tego można zobaczyć tutaj: http://www.dave-woods.co.uk/wp-content/uploads/2008/01/full-height-updated.html

1

Niclas Larsson 13 sierpień 2011, 01:00

Jak nakładać obrazy tła, rozwijając puste znaczniki?

2 odpowiedzi

Podobne pytania

Nowe pytania

html