Hva skjer hvis Content Overskridelser Max høyde i CSS?

"Max-height" er en CSS eiendom som kan brukes på alle blokknivå HTML-elementet, for eksempel <div> <p> eller <blockquote>, for å sette den maksimale høyden mulig for det elementet. Hvis innholdet renner over den maksimale høyden, er standard virkemåte for å vise innholdet uansett; du kan endre dette ved å legge til "overflow" CSS eiendom til element i spørsmålet.

standard Behavior

Hvis ingen "overflow" eiendom er angitt, vil innhold som ikke passer innenfor angitt høyde av elementet skal vises uansett, overfylte grensene for sin inneholder element. Dette kan føre til layout og lesbarhet problemer, siden innholdet funnet umiddelbart etter overfylte delen skal delvis dekkes av overfylte innholdet.

Hiding Overveldet innhold

Legge til en "overflow" eiendom med en verdi på "skjult" til den overfylte element vil føre til alt innhold som ikke passer innenfor den angitte høyden til å være skjult. Hvis for eksempel et bilde 500 piksler høye inneholdes i en <div> innstilt på en maksimal høyde på 250 piksler og skjult overløp, vil bare halvparten av bildet skal vises.

Legge rullefelt

Innstilling av verdien av "overflow" eiendom til "auto" vil føre til et rullefelt vises hvis innholdet flyter over sin inneholder element, slik at helheten av innholdet skal være tilgjengelig uten layout eller lesbarhet problemer. Innstilling av "overflow" verdien til "Scroll" vil føre til både en horisontal og en vertikal rullefeltet for å være alltid synlig, om innholdet flyter over sin inneholder element eller ikke.

betraktninger

Selv om når du utformer ditt nettsted innholdet ikke overkjørt din høyde begrenset blokkelementer, må du kanskje legge til mer innhold i fremtiden. På grunn av dette, når du bruker den "max-høyde" CSS eiendom, bør du alltid legge til "overflow" eiendom i tillegg; Dette vil fremtidssikker layout og lar deg legge innhold uten å gjøre noen endringer i oppsettet selv. Enten du setter overløp å være skjult eller vises med rullefelt vil avhenge av innholdet.