Seitengröße und Anzeige am unteren Rand

Parallax · #1 (**permalink**) 17.04.2016, 23:36

Hallo,

ich habe ein Problem, bei dem ich auf keine Lösung komme.

Ich habe eine XHTML Seite. Dort ist im CSS die Höhe für Body und HTML auf 100% festgelegt und eine min Height von 1080px eingestellt.

Allerdings hat die Seite immer noch Scrollbalken auf der Seite, dass sollte eigentlich nicht sein. Ich dachte das Problem liegt an der min Height, aber auch ohne dieses Attribut ist die Seite immer noch größer als das Browserfenster obwohl die unteren Bereiche keine weiteren Elemente mehr enthalten. Wie geht man hierbei am besten vor?

Das zweite Problem liegt bei einer Leiste am unteren Bildschirmrand.
Die Seite ist 3-spaltig aufgebaut. Die Linke und die rechte Spalte sollen am unteren Bildschirmrand enden, die mittlere auch. Wird der Inhalt der mittleren Spalte größer als die Bildschirmhöhe, sollen nur in der mittleren Spalte Scrollbalken angezeigt werden, mit denen sich der Inhalt scrollen lässt. Auf jeder Einzelseite der mittleren Spalte steht ein Button zum Speichern der Eingaben. Ist der Inhalt der Seite größer als die Bildschirmhöhe, muss man um den Speicherbutton zu erreichen, ganz nach unten scrollen. Das soll umgangen werden, in dem am unteren Bereich des Bildschirms immer eine Leiste angezeigt wird, welche den Button enthält, unabhängig von Bildschirmgröße oder ähnlichem.

Lässt sich das irgendwie umsetzen?`

Mit freundlichen Grüßen,

Parallax

MrMurphy · #2 (**permalink**) 17.04.2016, 23:55

Hallo

Ich vermisse einen Link zu der Seite.

Zitat:

Lässt sich das irgendwie umsetzen?

Wahrscheinlich ja. Wobei eine Seite mit HTML5 schöner wäre. XHTML wurde bereits 2008 offiziell begraben.

Nachtrag: Ich habe mal ein grundsätzliches Beispiel erstellt:

Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Layout 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
   }

   /* Hack für IE 10 und IE 11 */
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      html {
         height: 100%;
      }
   }

   @media all {
      body {
         height: 100%;
         min-height: 100vh;
         margin: 0 auto;
         display: -ms-flexbox;
         display: flex;
         -ms-flex-direction: column;
         flex-direction: column;
      }
      div.wrap-content {
         max-height: 100vh;
         -webkit-box-flex: 1;
         -webkit-flex: 1;
         flex: 1 0 auto;
         /*Für alle IE, muss hinter "flex: 1;" stehen*/
         -ms-flex: 1 0 auto;
      }
   }

   /*Layout .wrap-content*/
   @media all {
      .wrap-content {
         display: flex;
      }
      .wrap-content>* {
         padding: 0.3rem;
         border: 3px double orange;
         margin: 0;
      }
      .wrap-content>:nth-child(1) {
         flex: 0 0 20%;
      }
      .wrap-content>:nth-child(2) {
         overflow-y: scroll;
         flex: 1 1 auto;
      }
      .wrap-content>:nth-child(2)>:nth-last-child(2) {
         margin-bottom: 3rem;
      }
      .wrap-content>:nth-child(3) {
         flex: 0 0 20%;
      }
   }

   /*Formular*/
   @media all {
      form {
         background-color: white;
         position: fixed;
         bottom: 0;
         width: calc(60% - 30px);
         border-bottom: 3px double orange;
         padding: 0.3rem;
      }
      button {
         font-size: 1.2rem;
         font-weight: bold;
      }
   }

   </style>
</head>
<body>
   <div class="wrap-content">
      <div class="div01">
         <p>div01</p>
      </div>
      <div class="div02">
         <p>div02</p>
         <h2>Autobahnwahn</h2>
         <p>Seit zwei Jahren ist meine Arbeit in Düsseldorf. Meine Familie lebt dagegen in Hamburg. Und dazwischen ich, aber ganz cool.</p>
         <p>Vollbremskombination aus Ampel oder Einfädeln oder beides auf einmal. Geht nur mit Tricks. Eben noch kurz auf die A 52. Schon vielversprechend lebhaft. Hinter dem Breitscheider Kreuz geht es richtig los. Stau auf der A 3 bis Oberhausen.</p>
         <p>Danach entspannt es sich auch nur deshalb, weil enge Baustellen mit rüden Geschwindigkeitsbegrenzungen zum gleichmässigen Rollen zwingen. Es wird links überholt, es wird rechts überholt. Es wird gar nichts mehr, alles steht und macht lange Gesichter. Ich dagegen wechsle die Cassette.</p>
         <p>Es geht weiter. Vor und hinter mir hektische Spurenwechsel. So zieht sich das Stück A 2 bis zum Recklinghauser Kreuz. Der erhofften Entspannung folgt zuverlässig der Vollfrust. Die A 43 bis Münster ist genauso voll wie das Kamener Kreuz zur Rush-hour. Auf der A 1 ist dann endgültig Schluss mit lustig. Alles dümpelt auf der Überholspur. Natürlich mit 90. Rechts geht es schneller, irrerweise wegen der Lkws. Die wollen nämlich alle noch vor zehn zu Hause sein.</p>
         <p>Osnabrück. Dammer Berge. Tanken, weil kleiner Tank. Nach Wildeshausen wird die Autobahn dreispurig. Klasse! Alles stürmt nach links, auch ein Kadett City mit Bochumer Kennzeichen. Bleibt hartnäckig. Blinker bringt auch nichts. Lichthupe ebenfalls zwecklos. Muss rechts vorbei. Ein Mittelscheitel macht den Breiten. Der Verkehr verzieht sich.</p>
         <p>Nach Stuckenborstel gehe ich vom Gas nicht mehr runter. Den Abzweig zum Elbtunnel mal wieder viel zu schnell genommen. Der Rest geht schnell. Entscheide mich natürlich wie immer für die linke Röhre, um dann nach Tunnelende dramatisch blitzartig vier Spuren nach rechts in die Ausfahrt hineinzubremsen. Das einzige, was auf der Stresemann wieder aufhält, ist eine kuriose Ampelschaltung.</p>
         <p>Am Phantom der Oper links, auf dem Ring einmal rundrum bis zum Winterhuder Marktplatz, dahinter noch mal links, zum Stadtpark hinunter. Ich bin da. Wieder zu spät. Alles schläft schon. Samstag. Sonntag. Deutschland guckt Tagesschau.</p>
         <p>Ich gucke in den linken Aussenspiegel. Dann drei Spuren rüber wieder in die linke Röhre. Diesmal doppelt so schnell durch den Tunnel wie auf dem Hinweg. Bleibe auf der linken Spur bis zum Abzweig Richtung Bremen. Der ist zweispurig, deshalb gibt es das beliebte Abbiegen-im-letzten-Moment-Spiel. Weil offensichtlich die Geschwindigkeitsbegrenzung vergessen wurde, bin ich drei Minuten später schon auf der Bremer Autobahn.</p>
         <p>Die Überholspur ist frei. Ein Fünfer will es wissen. Muss ein i sein, er lässt sich nicht abschütteln. Wie immer auf dem Rückweg säuft der Wagen wie ein Loch. An der Raststätte Wildeshausen bin ich fällig. Brauche auch noch was Süsses. Dann leiste ich mir mal wieder den höllisch teuren Trinkjoghurt in der ekligen Plastikflasche. Pinkeln kann entfallen. Superkurzer Tankstopp.</p>
         <p>Der Verkehr nimmt zu, die Tempo-100-Schilder nehmen auch zu. Der Liter von dem süssen Zeug ist weg, bevor ich in Osnabrück bin. Vor dem Beifahrersitz sammelt sich der Müll. Endlich sind die Laster da. Dann regnet es auch noch.</p>
         <p>Wie immer warte ich auf das kurze dreispurige Steigungsstück im Tecklenburger Wald, um mich an die Spitze der Schlange zu setzen. Die dritte Spur kommt, und mein Plan wird von einem japanischen, wild getunten Insekt mit Essener Kennzeichen vereitelt. Nunmehr prasselnder Regen tut sein übriges. Noch vor Münster verschwindet er so schnell, wie er gekommen ist. Die Strasse ist trocken. Grossartig!</p>
         <p>Jetzt geht es nämlich auf die 43 Richtung Recklinghausen, meine private Rennstrecke. 60 Kilometer, die ich schon in knapp 20 Minuten geschafft habe. Ich biege auf die besagte Autobahn, natürlich sofort nach links auf die Überholspur. Muss mich jetzt leider unbeliebt machen. Einer zeigt mir den Stinkefinger. Ich werfe Kusshändchen, das macht sie besonders fertig. Und ich gebe Gas, gerne auch mit Zurückschalten. Manche Lkw-Fahrer, an denen ich vorbeizische, grüssen freundlich mit Lichthupe. Ich kann leider nicht zurückgrüssen, habe keine Zeit dafür.</p>
         <form action="">
            <button>Button</button>
         </form>
      </div>
      <div class="div03">
         <p>div03</p>
      </div>
   </div>
</body>
</html>

Außerdem stelle ich das Beispiel zeitweise auf meiner Testseite bereit:

Layout 01

Gruss

MrMurphy

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Leiste am Unteren Bildschirm rand	mutantenboss	CSS	8	25.07.2010 13:42
Inhaltsdiv bis zum unteren Rand	hansegirl2	CSS	19	17.02.2010 16:51
Container am unteren Rand & Content 100% Höhe	KILLHILL	CSS	1	23.10.2009 15:46
Hintergrundbild immer am unteren Rand ausrichten	washy	CSS	2	15.10.2007 16:42
Wie Liste am unteren Rand eines div darstellen?	Stadtmensch	CSS	0	21.01.2007 00:18