Mam otoki otoki, która zawiera 2 div obok siebie. Powyżej tego kontenera mam div, który zawiera mój nagłówek. Div otoki musi wynosić 100% minus wysokość nagłówka. Nagłówek ma około 60 pikseli. Zostało to naprawione. Więc moje pytanie brzmi: jak ustawić wysokość div otoki opakowania na 100% minus 60 pikseli?
<div id="header"></div>
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
Odpowiedzi:
Oto działający css, przetestowany pod Firefox / IE7 / Safari / Chrome / Opera.
„overflow-y” nie jest zatwierdzony przez w3c, ale obsługuje go każda większa przeglądarka. Two divs #left i #right wyświetli pionowy pasek przewijania, jeśli ich zawartość jest zbyt wysoka.
Aby działało to pod IE7, musisz uruchomić tryb zgodny ze standardami, dodając DOCTYPE:
źródło
position: relative
na kontener. Następnie umieść pojemnik w dowolnym miejscu na stronie.W CSS3 możesz użyć
źródło
Jeśli potrzebujesz obsługi IE6, użyj JavaScript, więc zarządzaj rozmiarem otoki opakowania (ustaw pozycję elementu w pikselach po odczytaniu rozmiaru okna). Jeśli nie chcesz używać JavaScript, nie możesz tego zrobić. Istnieją obejścia, ale spodziewaj się, że za tydzień lub dwa sprawdzi się w każdym przypadku i w każdej przeglądarce.
W przypadku innych nowoczesnych przeglądarek użyj tego css:
źródło
świetny ... teraz przestałem używać% he he on ... z wyjątkiem głównego pojemnika, jak pokazano poniżej:
a oto css:
przetestowałem to we wszystkich znanych przeglądarkach i działa dobrze. Czy korzystanie z tej metody ma jakieś wady?
źródło
Możesz zrobić coś takiego jak wysokość: calc (100% - nPx); na przykład wysokość: oblicz (100% - 70 pikseli);
źródło
Upewnij się, używając mniej
W przeciwnym razie less nie skompiluje go poprawnie
źródło
To nie odpowiada dokładnie na postawione pytanie, ale tworzy ten sam efekt wizualny, który próbujesz osiągnąć.
źródło
W tym przykładzie możesz zidentyfikować różne obszary:
źródło
Nie widziałem jeszcze czegoś takiego, ale pomyślałem, że to tam opublikuję.
Następnie CSS:
Oto działający jsfiddle
Uwaga: nie mam pojęcia, do czego służy zgodność przeglądarki. Po prostu bawiłem się alternatywnymi rozwiązaniami i wydawało się, że to działa dobrze.
źródło
Użyj zewnętrznego otoka otoki ustawiony na 100%, a następnie wewnętrzny otok otoki 100% powinien być teraz względem tego.
Myślałem, że to na pewno zadziałało, ale najwyraźniej nie:
źródło
Jeśli nie chcesz używać absolutnego pozycjonowania i całego tego jazzu, oto poprawka, którą lubię:
twój html:
twój css:
źródło
#header
powinno byćmargin-top:-60px;
. Po drugie,height:100%
oznacza, że wysokość będzie wynosić 100% wysokości elementów macierzystych, nie uwzględniając marginesów, wypełnienia i ramek. W zależności od ustawień przewijania spowoduje to wyświetlenie pasków przewijania lub przycięcie zawartości.