Wysokość strony do 100% widoczności?

Zacznę od stwierdzenia, że jestem bardzo nowy w tworzeniu stron internetowych jako całości i że jest to moja pierwsza responsywna strona, więc proszę o zachowanie delikatności i pamiętaj o tym, jestem definicją słowa noob na tym etapie . Poszukując odpowiedzi na jakiś czas i nie mając szczęścia mam nadzieję, że ktoś tutaj może mi pomóc.Wysokość strony do 100% widoczności?

Próbuję utworzyć stronę główną dla tej witryny. Projekt jest po prostu blokiem po lewej stronie strony, przedstawiającym logo u góry, a następnie serię linków pod spodem, z których wszystkie znajdują się na tym samym tle. Po prawej stronie znajduje się jeden duży obraz, który wypełnia resztę ekranu. Chcę, aby cała strona wypełniała okno przeglądarki dowolnego urządzenia, na którym jest oglądana, więc absolutnie żadne przewijanie nie jest konieczne, tj. Szerokość i wysokość w obu przypadkach jest 100% widoczna. Szerokość strony nie daje mi żadnej żałoby, słodko dostosowuję się do różnych rozmiarów ekranu, jak mi się podoba, z paskiem bocznym na poziomie 20% szerokości i obrazem głównym na poziomie 80%.

Wysokość to jednak inna historia. Nie mogę się wydawać, w jakiejkolwiek kombinacji CSS, którą próbowałem do tej pory, móc uzyskać wysokość do zachowania się w 100% widoczności. Pasek boczny jest zbyt krótki, a obraz główny zbyt długi lub oba są za długie itd. Główny obraz Chcę zachować proporcje i po prostu przepełnić to div, jeśli jest to wymagane, aby zachować większość wyświetlanych informacji i stronę. pasek Chcę po prostu dopasować do 100% wysokości strony. Tu jest mój kodu w chwili obecnej:

<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style> 
html 
{ 
height: 100%; 
margin: 0; 
padding: 0; 
} 

body 
{ 
height: 100%; 
margin: 0; 
padding: 0; 
} 

#page 
{ 
width: 100%; 
height: 100%; 
margin: 0; 
padding: 0; 
} 

#sidebar 
{ 
float: left; 
width: 20%; 
height: 100%; 
padding-bottom: 10; 
margin: 0; 
background: url(/Images/bg.jpg); 
} 

#slideshow 
{ 
float: right; 
width: 80%; 
height: 100%; 
overflow: hidden; 
margin: 0; 
padding: 0; 
} 

#logoimg 
{ 
width: 80%; 
margin-top: 10%; 
margin-left: 10%; 
margin-right: 10%; 
} 

#mainimg 
{ 
width: 100%; 
overflow: hidden; 
} 

.link 
{ 
font-family: courier; 
font-size: 1.3em; 
text-align: center; 
padding-top: 7%; 
padding-bottom: 1%; 
color: rgba(255,255,255,1.00); 
} 

@font-face 
{ 
font-family: courier; 
src: url(/courier_new-webfont.ttf); 
src: url(/courier_new-webfont.eot); 
src: url(/courier_new-webfont.woff); 
} 

</style> 
</head> 

<body> 
<div id="page"><!--Whole page container--> 
<div id="sidebar"><!--Side bar container--> 
    <div class="link" id="logo"><img id="logoimg" src="/Images/logo.png"></div> 
    <div class="link" id="homelink">Home<!--Home link--></div> 
    <div class="link" id="aboutlink">About<!--About link--></div> 
    <div class="link" id="gallerylink">Gallery<!--Gallery link--></div> 
    <div class="link" id="priceslink">Prices<!--Prices link--></div> 
    <div class="link" id="reviewslink">Reviews<!--Reviews link--></div> 
    <div class="link" id="contactlink">Contact<!--Contact link--></div> 
    <div class="link" id="clientslink">Clients<!--Clients link--></div> 
</div> 
<div id="slideshow"><img id="mainimg" src="/Images/main.jpg"><!--Image slideshow container--> 
</div> 
</div> 
</body> 
</html>

Każda pomoc z tym byłoby bardzo mile widziane i nie wahaj się zwrócić uwagę na wszelkie masowo amatorskie błędy. Jestem gotów przyjąć każdą krytykę i wyciągnąć z niej wnioski. Dzięki

Źródło

2013-10-30 Dan

Pierwszą rzeczą, którą mogę zasugerować, jest usunięcie tagu stylu i przeniesienie css na własną stronę. Jeśli masz zamiar wprowadzić zapytania o media i wszystko do tego równania, potrzebujesz osobnej strony css. –

Zrobiłem ci podstawową konfigurację, aby pokazać, jak możesz to zaprojektować. Najlepszym sposobem, jaki znalazłem, aby ustawić wysokość na 100%, jest użycie jQuery/Javascript. Możesz znaleźć wysokość okna, a następnie wprowadzić ją do css przy użyciu jej.

Sposób w jaki to działa to var wH = $(window).height(); znajduje wysokość i zmienia ją w liczbę. Następnie, gdy używasz $('.sideBar').css({height: wH});, wprowadzasz wysokość do css sideBara.

jQuery

function windowH() { 
    var wH = $(window).height(); 

    $('.sideBar, .mainImg').css({height: wH}); 
} 

windowH();

Ta funkcja pisałem daje te dwa elementy wysokości okna. Dzięki temu te dwa elementy będą w 100% dowolne okno przeglądarki.

Polecam również zamienić ten nav w ul, który zawarłem w skrzypcach, aby pokazać, jak to jest możliwe.

JSFIDDLE (Usuń „show” na końcu adresu URL, aby zobaczyć kod)

Następną rzeczą będzie trzeba badań jest media queries celu dostosowania treści do dostosowania lepiej do urządzeń mobilnych. Zastanów się nad zmianą sideBar na poziomy nav podczas korzystania z urządzeń mobilnych.

Jeśli chcesz czysty CSS tylko podejście to można zrobić coś takiego,

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
}

Dodając wysokość & szerokość do 100% w swoje html/body można następnie wykorzystać height: 100% na innych elementach wypełnić całą stronę.

Zapoznaj się z tym JSFIDDLE, aby zobaczyć, jak to działa.

Helpful read about responsive web design

Źródło

2013-10-30 22:43:38

To jest wspaniałe i bardzo dziękuję za bycie tak pomocnym Josh, jeszcze go nie wypróbowałem, ale później i zobaczę, jak sobie radzę. Szybkie przeglądanie podanych linków pokazuje im, że wyglądają na bardzo przydatne dla mnie, dlatego też za to dziękuję. Już planowałem użyć zapytań o media z punktem przerwania, aby przełączyć się na przewijanie w pionie w rozmiarze tabletu portretowego i poniżej, po prostu chciałem naprawić ten problem, zanim zagłębię się w to !! Wielkie dzięki znowu – Dan

Bez problemu! Nigdy nie stworzyłem takiego układu, więc pomyślałem, że może to być korzystne dla nas obu. Możesz również ustawić wysokości takie jak: 'var wH = $ (window) .height()/2;' to byłaby 1/2 wysokości, 'var wH = $ (window) .height()/4;' i byłaby to 1/4 wysokości. Jeśli ta odpowiedź Ci pomogła, nie zapomnij oznaczyć jej jako właściwej odpowiedzi. Powodzenia w projektowaniu i nie krępuj się zadawać mi żadnych pytań! –

To zadziwiająco dziękuje. Odpowiedź zaznaczona :) – Dan

Oto tylko uproszczony przykład kod HTML:

<div id="welcome"> 
    your content on screen 1 
</div> 
<div id="projects"> 
    your content on screen 2 
</div>

i oto CSS za pomocą VH:

div#welcome { 
    height: 100vh; 
    background: black; 
} 

div#projects { 
    height: 100vh; 
    background: yellow; 
}

stąd: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

Działa dla mnie.

Źródło

2014-09-19 19:43:40

To jest najlepsza i najprostsza odpowiedź !! – emi

Wysokość strony do 100% widoczności?

Odpowiedz

Powiązane problemy