GoldenLine
Zaloguj się
Krzysztof Skołucki

Krzysztof Skołucki webmaster

Temat: Procentowa wartość DIV.

Witam,
Czy istnieje możliwość określenia w % wysokości DIV`a, tak żeby np: #container miał wysokość 100% okna przeglądarki.
Pozdrawiam.
Link do wypowiedziLink
Wojciech Kopycki

Wojciech Kopycki CEO at CopySky

Temat: Procentowa wartość DIV.

Żeby nadać DIV-ovi wysokość "x%" nie potrzebujesz do tego JavaScriptu. Wystarczy, że <body> dasz "height: 100%", a <div id="container">...</div> będzie bezpośrednim elementem w <body>. ;)
Link do wypowiedziLink

konto usunięte

Temat: Procentowa wartość DIV.

Pomoże jeszcze height: 100% dla html
Link do wypowiedziLink
Krzysztof Skołucki

Krzysztof Skołucki webmaster

Temat: Procentowa wartość DIV.

To fakt, mogę wykonać to w CSS`ie. Docelowo chciałbym zrobić coś takiego CONTAINER którego wysokość wynosi 100% wewnątrz trzy elementy HEADER którego wartość w zależności od strony jest zmienna (% lub px), CONTENT (z małą ilościa treści) poniżej FOOTER o zmiennej wysokości (% lub px). Robiąc CONTENT w CSS`ie niby wszystko działa ale calość nie mieści się na stronie (pomimo małej ilości treści, wysokość 100%) i należy ją przewijać. Mój pomysł na rozwiązanie problemu to CONTAINER który zawiera CONTENT (100%) minus wartosc HEADER i FOOTER która jest zmienna.
Pozdrawiam.
Link do wypowiedziLink
Wojciech Kopycki

Wojciech Kopycki CEO at CopySky

Temat: Procentowa wartość DIV.

Chodzi Ci o to, żeby strona zawsze dopasowywała się do wysokości okna przeglądarki, ale żeby HEADER i FOOTER był zawsze widoczny?

/* HTML */

<body>

    <div id="header"></div>

    <div id="container"></div>

    <div id="footer"></div>

</body>



/* CSS */

html, body { height: 100%; }

#header {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    height: 250px; /* wartość dla margin-top lub padding-top dla #container  */

}

#footer {

    position: fixed;

    left: 0;

    right: 0;

    bottom: 0;

    height: 100px; /* wartość dla margin-bottom lub padding-bottom dla #container  */

}

#container {

    margin: 250px 0 100px;

}
Link do wypowiedziLink
Krzysztof Skołucki

Krzysztof Skołucki webmaster

Temat: Procentowa wartość DIV.

Tak, żeby strona nawet z małą ilością tekstu zawsze dopasowała się do okna przeglądarki. HEADER I FOOTER mogą zostać na stałe w miejscu przeznaczenia (góra i dół, przewijają się razem ze stroną). Zastanawiam się czy można to zautomatyzować za pomocą skryptu który w zależności od strony pobiera wartość HEADER i FOOTER (która jest zmienna w zależności od treści) i o podane DIV`y pomniejsza CONTENT.
Link do wypowiedziLink
Wojciech Kopycki

Wojciech Kopycki CEO at CopySky

Temat: Procentowa wartość DIV.

No to Ci podałem kod w poprzednim poście i nie potrzebujesz do tego JavaScriptu. Jednak jeśli masz problem z tym, że chciałbyś mieć tło rozciągnięte (a raczej powielone) na całą wysokość okna, ale z odstępem od góry na HEADER to możesz zrobić tak:
body {

    background: [color] [url] [repeat] [attachment] 0 250px; /* 250px - odbicie tła od góry o wysokość HEADER */

}
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Przewijanie div'a




Wyślij zaproszenie do
Anuluj