webentwicklung-frage-antwort-db.com.de

Seitenhöhe auf 100% des Darstellungsbereichs?

Ich möchte damit sagen, dass ich für die Web-Entwicklung insgesamt sehr neu bin und dass dies meine allererste responsive Seite ist. Bitte seien Sie vorsichtig und denken Sie daran, ich definiere das Wort noob in diesem Stadium. Nachdem ich eine Weile nach einer Antwort gesucht hatte und kein Glück hatte, hoffe ich, dass mir hier jemand helfen kann.

Ich versuche eine Homepage für diese Website zu erstellen. Das Design ist einfach ein Block auf der linken Seite der Seite, der das Logo oben und dann eine Reihe von Links darunter zeigt, die alle auf demselben Hintergrund angeordnet sind. Rechts davon ist ein großes Bild, das den Rest des Bildschirms ausfüllt. Ich möchte, dass die gesamte Seite das Browserfenster des jeweiligen Geräts ausfüllt, so dass absolut kein Bildlauf erforderlich ist, d. H. Breite und Höhe, jeweils 100% des Darstellungsbereichs. Die Breite der Seite gibt mir überhaupt keine Trauer und passt sich auf verschiedene Bildschirmgrößen an, wie ich will, mit einer Seitenleiste von 20% der Breite und einem Hauptbild von 80%.

Die Höhe ist jedoch eine andere Geschichte. Ich kann in keiner Kombination von CSS, die ich bisher ausprobiert habe, den Anschein haben, die Höhe zu 100% des Darstellungsbereichs zu erhalten. Entweder ist die Seitenleiste zu kurz und das Hauptbild ist zu lang oder beide sind zu lang usw. usw. Das Hauptbild, von dem ich das Seitenverhältnis beibehalten möchte, und es einfach überlaufen lässt, ist sein div so erforderlich, dass der Großteil der Anzeige und die Seite angezeigt werden Bar Ich möchte nur auf 100% der Seitenhöhe passen. Hier ist mein Code zur Zeit: 

<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>

Jede Hilfe wäre sehr dankbar und zögern Sie nicht, auf massive Amateurfehler hinzuweisen. Ich bin bereit, jegliche Kritik anzunehmen und daraus zu lernen. Vielen Dank

19
Dan

Ich habe Ihnen eine Grundeinstellung gemacht, um zu zeigen, wie Sie dies gestalten würden. Die beste Methode, die ich gefunden habe, um die Höhe auf 100% einzustellen, ist die Verwendung von jQuery/Javascript. Sie können die Höhe des Fensters ermitteln und diese dann in das CSS eingeben, wenn Sie es verwenden.

Das funktioniert so, dass var wH = $(window).height(); die Höhe findet und diese in eine Zahl umwandelt. Wenn Sie dann $('.sideBar').css({height: wH}); verwenden, geben Sie die Höhe in das CSS von sideBar ein.

jQuery

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

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

windowH();

Diese Funktion, die ich geschrieben habe, gibt diesen beiden Elementen die Höhe des Fensters. Dadurch können diese beiden Elemente 100% des Browserfensters sein.

Ich empfehle auch, aus nav eine ul zu machen, die ich in die Geige aufgenommen habe, um zu zeigen, wie das möglich ist.

JSFIDDLE (Entfernen Sie 'show' am Ende der URL, um den Code anzuzeigen)

Das nächste, was Sie erforschen müssen, ist media queries, um den Inhalt anzupassen, um ihn besser an mobile Geräte anzupassen. Ändern Sie bei mobilen Geräten die Seitenleiste in eine horizontale Navigation.

Wenn Sie einen reinen CSS-Ansatz wollen, können Sie so etwas tun,

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

Durch Hinzufügen von Höhe und Breite zu 100% in Ihrer html/body können Sie height: 100% für andere Elemente verwenden, um die gesamte Seite zu füllen.

Lesen Sie dieses JSFIDDLE , um zu sehen, wie es funktioniert.

Hilfreiche Lektüre über responsives Webdesign

18
Josh Powell

Hier ist nur ein vereinfachtes Codebeispiel für HTML:

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

und hier ist das CSS mit vh:

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

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

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

Für mich geht das.

43
Foad Tahmasebi

Beispielcode für die genaue Abdeckung der Seitenhöhe.

HTML

<div class="container">  
  <div class="header">
    <h1>Header</h1>
  </div>
  <div class="content">
    Main content
  </div>
</div>

CSS

html, body {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}
.container {
 max-width: 1020px;
 margin: auto;
 height: 100%;
 background: #ddd;
 padding:16px;
 box-sizing:border-box
}
.header,.content{
 background:#fff;
 padding:16px
}
.content{
 margin-top:16px;
 min-height:calc(100% - 160px);
}

Beispiel-Link: https://codepen.io/rahdirs/pen/jeRVod

0
Sridhar

In Chrome genügt es, nur display: flex in der body hinzuzufügen.

In Firefox müssen Sie height: 100% hinzufügen, um das gewünschte Ergebnis zu erhalten. Und ein margin: 0 entfernt die lästigen Bildlaufleisten.

<body style="display:flex; height: 100%; margin: 0;">
  <div style="background-color: red; flex:1;"></div>
  <div style="background-color: green; flex:2;"></div>
  <div style="background-color: blue; flex:1;"></div>
</body>
0
bittnkr