Próbuję utworzyć klasy CSS wielokrotnego użytku, aby uzyskać większą spójność i mniej bałaganu na mojej stronie, i utknąłem przy próbie standaryzacji jednej rzeczy, której często używam.
Mam kontener <div>
, dla którego nie chcę ustawiać wysokości (ponieważ będzie się różnić w zależności od tego, gdzie na stronie się znajduje), a wewnątrz jest nagłówek <div>
, a następnie nieuporządkowana lista elementów, wszystkie z zastosowaniem CSS im.
Wygląda to tak:
Chcę, aby lista nieuporządkowana zajęła pozostałe miejsce w kontenerze <div>
, wiedząc, że nagłówek <div>
jest 18px
wysoki. Po prostu nie wiem, jak określić wysokość listy jako „wynik 100%
minus 18px
”.
Widziałem to pytanie zadawane w kilku innych kontekstach dotyczących SO, ale pomyślałem, że warto zadać jeszcze raz w mojej konkretnej sprawie. Czy ktoś ma jakieś porady w tej sytuacji?
Odpowiedzi:
Zdaję sobie sprawę, że to stary post, ale biorąc pod uwagę, że nie zostało to zasugerowane, warto wspomnieć, że jeśli piszesz dla przeglądarek zgodnych z CSS3, możesz użyć
calc
:Warto zauważyć, że nie wszystkie przeglądarki obsługują obecnie standardową funkcję CSS3 calc (), dlatego może być wymagane wdrożenie specyficznych dla przeglądarki wersji funkcji, takich jak:
źródło
lessc --strict-math=on
aby mniej nie oceniać wyrażenia wewnątrzcalc
- to tylko problem, z którym się spotkałem i spędziłem dużo czasu (od Less 2.0.0)100%-18px
,100%- 18px
, i100% -18px
nie działa w przeglądarkach I testowanych.Aby uzyskać nieco inne podejście, możesz użyć czegoś takiego na liście:
Działa to tak długo, jak ma kontener nadrzędny
position: relative;
źródło
position: relative;
mnie potykał.absolute
w dziecięcym pojemniku, nie może byćrelative
.absolute
również) i musi być również ustawiony na 100% wysokości.Używam do tego Jquery
następnie łączę zmianę rozmiaru okna, aby ponownie go skalować za każdym razem, gdy zmienia się rozmiar okna przeglądarki (jeśli rozmiar kontenera zmieni się wraz ze zmianą rozmiaru okna)
źródło
Nie definiuj wysokości jako procentu, po prostu ustaw
top=0
ibottom=0
, tak:źródło
height:100%
idisplay:block
. W przeciwnym razie byłoby to bardzo eleganckie rozwiązanie. Co ciekawe,margin:auto
nie można również wyśrodkować obiektu o stałej szerokości w pionie, nawet jeśli działa dobrze w poziomie.Zakładając wysokość nagłówka 17 pikseli
Lista css:
Nagłówek css:
źródło
ul { margin-top: -17px; }
overflow:hidden;
element zawierającyoverflow:auto;
żądany element.To zadziałało dla mnie!
źródło
calc()
wyśrodkować go w czasie wykonywania. Ale w wielu przypadkach nie powinno to stanowić problemu. Inną rzeczą, o której należy pamiętać, jest to, że stosowanie wielu ujemnych wartości marginesów, wypełnienia i przesunięć może powodować zamieszanie podczas debugowania kodu później, więc staraj się zachować prostotę.Spróbuj zmienić rozmiar pudełka. Aby uzyskać listę:
Dla nagłówka:
Oczywiście kontener nadrzędny powinien mieć coś takiego:
źródło
Kolejny sposób na osiągnięcie tego samego celu: elastyczne pudełka . Ustaw kontener jako elastyczne pole kolumnowe, a wtedy będziesz mieć swobodę pozwalania niektórym elementom mieć stały rozmiar (zachowanie domyślne) lub wypełniać / zmniejszać do przestrzeni kontenera (z Flex-Grow: 1 i Flex- kurczenie się: 1).
Zobacz https://jsfiddle.net/2Lmodwxk/ (spróbuj rozszerzyć lub zmniejszyć okno, aby zauważyć efekt)
Uwaga: możesz także użyć właściwości skrótu:
źródło
Próbowałem kilku innych odpowiedzi i żadna z nich nie działała tak, jak chciałem. Nasza sytuacja była bardzo podobna, gdy mieliśmy nagłówek okna, a okno można było zmieniać za pomocą obrazów w bryle okna. Chcieliśmy zablokować proporcje zmiany rozmiaru bez konieczności dodawania obliczeń, aby uwzględnić stały rozmiar nagłówka i nadal mieć obraz wypełniający bryłę okna.
Poniżej stworzyłem bardzo prosty fragment, który pokazuje, co zrobiliśmy, co wydaje się działać dobrze w naszej sytuacji i powinno być kompatybilne z większością przeglądarek.
W naszym elemencie okna dodaliśmy margines 20px, który przyczynia się do pozycjonowania względem innych elementów na ekranie, ale nie wpływa na „rozmiar” okna. Nagłówek okna jest następnie pozycjonowany absolutnie (co usuwa go z przepływu innych elementów, więc nie spowoduje przesunięcia innych elementów, takich jak lista nieuporządkowana), a jego góra jest ustawiona na -20px, co umieszcza nagłówek wewnątrz marginesu okna. Na koniec nasz element ul jest dodawany do okna, a wysokość można ustawić na 100%, co spowoduje wypełnienie bryły okna (bez marginesu).
źródło
Dzięki, rozwiązałem mój z twoją pomocą, poprawiłem go trochę, ponieważ chcę div 100% szerokości 100% wysokości (mniejsza wysokość dolnego paska) i brak przewijania na ciele (bez hack / ukrywania pasków przewijania).
W przypadku CSS:
W przypadku HTML:
To załatwiło sprawę, o tak, dodałem wartość div nieco lepiej dostosowaną do dolnej niż do wysokości dolnego paska, w przeciwnym razie pojawi się pionowy pasek przewijania, dostosowałem się do najbliższej wartości.
Różnica polega na tym, że jednym z elementów w obszarze dynamicznym jest dodanie dodatkowego dolnego otworu, którego nie wiem, jak się go pozbyć ... jest to tag wideo (HTML5), pamiętaj, że umieściłem ten tag wideo w tym css ( więc nie ma powodu, aby zrobić dolną dziurę, ale tak się dzieje):
Cel: mieć film, który zajmuje 100% przeglądarki (i zmienia się dynamicznie, gdy przeglądarka jest zmieniana, ale bez zmiany proporcji), mniej miejsca na dole, którego używam dla div z niektórymi tekstami, przyciskami itp. (I walidatory oczywiście w3c i css).
EDYCJA: Znalazłem przyczynę, tag wideo jest jak tekst, a nie element blokowy, więc naprawiłem to za pomocą tego css:
Zwróć uwagę
display:block;
na tag wideo.źródło
Nie jestem pewien, czy to zadziała w twojej konkretnej sytuacji, ale odkryłem, że wypełnienie wewnętrznego div spowoduje wypchnięcie zawartości wewnątrz div, jeśli zawierający div ma stały rozmiar. Musiałbyś albo unosić, albo bezwzględnie pozycjonować element nagłówka, ale inaczej nie próbowałem tego dla div div o zmiennej wielkości.
źródło