Jak uzyskać automatyczne dopasowanie strony do okna?

Właśnie zacząłem moją pierwszą właściwą stronę HTML dla przyjaciela i zastanawiałem się, w jaki sposób mógłbym zmusić stronę do autopoprawnienia strony?Jak uzyskać automatyczne dopasowanie strony do okna?

To projekt krajobrazu, który nie wymaga przewijania.

Źródło

2013-10-05 JoeJoe2416

@JoshC Wszyscy jesteśmy uczniami. Spróbuj powstrzymać sarkazm. – fred02138

Ponownie otwórz to pytanie, pomocne, aby je zamknąć. –

w rzeczywistości .. jest tutaj dużo sarkazmu [przepełnienie stosu] .. kiedy wszystko czego szukasz to jakaś pomoc ... przez chwilę po prostu zignorowałem tę stronę ... – albruno

można użyć CSS, aby to zrobić na przykład

<style> 
html{ 
    width:100%; 
    height:100%; 
} 
body{ 
    width:100%; 
    height:100%; 
    background-color:#DDD; 
} 
</style>

Źródło

2013-10-05 19:20:45 user1825286

kolor tła jest po prostu pokazać – user1825286

Należy ustawić body i html do position:fixed;, a następnie ustawić right:, left:, top: i bottom: do 0;. W ten sposób, nawet jeśli zawartość zostanie przepełniona, nie przekroczy granic widoczności.

Na przykład:

<html> 
<body> 
    <div id="wrapper"></div> 
</body> 
</html>

CSS:

html, body, { 
    position:fixed; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
}

JS Fiddle Example

Zastrzeżenie: Stosując tę metodę, jeśli użytkownik wprowadzi ich okno mniejsze, zawartość zostanie odcięty.

Źródło

2013-10-05 19:22:32 JSW189

Jeśli jest to krajobraz, będziesz potrzebować większej szerokości i mniejszej wysokości! To właśnie mają wszystkie witryny.

Najpierw pójdźmy z podstawową, a potem resztą!

Podstawowym CSS:

przez CSS można to zrobić,

#body { 
width: 100%; 
height: 100%; 
}

Tutaj używasz div z id ciała, jak:

<body> 
    <div id="body> 
    all the text would go here! 
    </div> 
</body>

Następnie można mieć stronę internetową o wysokości i szerokości 100%.

Co, jeśli spróbuje zmienić rozmiar okna?

Pojawiają się problemy, a jeśli spróbuje zmienić rozmiar okna? Wtedy wszystkie elementy wewnątrz #body będą próbowały zepsuć interfejs użytkownika. Do tego można napisać tak:

#body { 
height: 100%; 
width: 100%; 
}

I tylko dodać min-heightmax-heightmin-width i max-width.

W ten sposób element strony pozostałby w miejscu, w którym był załadowany.

Korzystanie JavaScript:

użyciu JavaScript, można kontrolować UI, używać jQuery jako:

$('#body').css('min-height', '100%');

i wszystkich innych pozostałych właściwości CSS i JS zadba o interfejsie użytkownika podczas użytkownik próbuje zmienić rozmiar okna.

Jak nie dodać zwój na stronie internetowej:

Jeśli nie próbujesz dodać zwój, a następnie można użyć tego JS

$('#body').css('min-height', screen.height); // or anyother like window.height

ten sposób dokument dostanie nową wysokość, ilekroć użytkownik załaduje stronę.

Druga opcja jest lepsza, ponieważ gdy użytkownicy mieliby różne rozdzielczości ekranu, chcieliby mieć arkusz CSS lub styl utworzony na ich własny ekran. Nie dla innych!

Wskazówka: Spróbuj użyć JS, aby znaleźć aktualny rozmiar ekranu i edytować stronę! :)

Źródło

2013-10-05 19:33:34

Jak uzyskać automatyczne dopasowanie strony do okna?

Odpowiedz

Powiązane problemy