it-swarm.com.de

Legen Sie die automatische Höhe und Breite in CSS/HTML für verschiedene Bildschirmgrößen fest

Ich habe 2 Ausgaben mit diesem Layout:

  1. .feature_content (grauer Hintergrund) passt Höhe und Breite an verschiedene Bildschirmgrößen an. Im Moment ist .feature_content auf großen Bildschirmen weit weg von der Fußzeile.
  2. Es gibt eine horizontale Bildlaufleiste, die ich unabhängig von der Bildschirmgröße entfernen möchte.

Ich möchte: .feature_content an die verbleibende Höhe anpassen und die horizontale Bildlaufleiste entfernen.

Hier ist eineGEIGE 

Und mein Code:

HTML

<div id="container">
    <div id="header">Header added just for demonstration purposes</div>
    <div id="content">Your content goes here
        <div class="featured_content"></div>
    </div>
</div>
<div id="footer">Footer here</div>

CSS:

* {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
}
body, html {
    width:100%;
    min-height: 100%;
}
div {
    height:100%;
    width:100%;
    border:5px solid black;
}
#header {
    background-color:orange;
}
#container {
    background:blue;
    margin: 0 auto;
    position: relative;
    height: auto !important;
}
#content {
    background:pink;
    padding-bottom: 100px;
    margin: 0 auto;
    position: relative;
}
#footer {
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
    height: 70px;
    left: 0;
    position: fixed;
    z-index: 100000;
    background:green;
}
.featured_content {
    min-height: 750px;
    max-height: 750px;
    width:200px;
    background-color:grey;
    position:fixed;
    margin:auto 0px;
    margin-top: 150px;
}
4
user1358072

Das willst du? DEMO . Versuchen Sie, das Fenster des Browsers zu verkleinern, und Sie werden sehen, dass die Elemente sortiert werden.

Was ich benutzt habe Flexibles Boxmodell oder Flexbox.

Fügen Sie einfach die folgenden CSS-Klassen zu Ihrem Containerelement hinzu (in diesem Fall div#container):

flex-init-setup und flex-ppal-setup.

Woher:

  1. flex-init-setup bedeutet Flexbox-Init-Setup; und
  2. flex-ppal-setup bedeutet Flexbox Principal Setup

Hier sind die CSS-Regeln:

 .flex-init-setup {
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
 }
 .flex-ppal-setup {
     -webkit-flex-flow: column wrap;
     -moz-flex-flow: column wrap;
     flex-flow: column wrap;
     -webkit-justify-content: center;
     -moz-justify-content: center;
     justify-content: center;
 }

Sei gut, Leonardo

5
leoMestizo

/// AKTUALISIERTE DEMO-2-WATCH-LÖSUNG ////

Ich hoffe, das ist die Lösung, die Sie suchen! DEMO1DEMO2

Bei dieser Lösung befindet sich die einzige Bildlaufleiste auf der Seite in der Mitte des Inhaltsbereichs. Bauen Sie in diesem Abschnitt Ihre Struktur mit einer Seitenleiste oder wie auch immer Sie möchten!

Sie können das mit diesem Code hier tun:

<div class="navTop">
<h1>Title</h1>
    <nav>Dynamic menu</nav>
</div>
<div class="container">
    <section>THE CONTENTS GOES HERE</section>
</div>
<footer class="bottomFooter">
    Footer
</footer>

Mit diesem Css:

.navTop{
width:100%;
border:1px solid black;
float:left;
}
.container{
width:100%;
float:left;
overflow:scroll;
}
.bottomFooter{
float:left;
border:1px solid black;
width:100%;
}

Und ein bisschen Jquery:

$(document).ready(function() {
  function setHeight() {
    var top = $('.navTop').outerHeight();
    var bottom = $('footer').outerHeight();
    var totHeight = $(window).height();
    $('section').css({ 
      'height': totHeight - top - bottom + 'px'
    });
  }

  $(window).on('resize', function() { setHeight(); });
  setHeight();
});

DEMO 1

Wenn Sie keine Jquery wollen

<div class="row">
    <h1>Title</h1>
    <nav>NAV</nav>
</div>

<div class="row container">
    <div class="content">
        <div class="sidebar">
            SIDEBAR
        </div>
        <div class="contents">
            CONTENTS
        </div>
    </div>
    <footer>Footer</footer>
</div>

CSS

*{
margin:0;padding:0;    
}
html,body{
height:100%;
width:100%;
}
body{
display:table;
}
.row{
width: 100%;
background: yellow;
display:table-row;
}
.container{
background: pink;
height:100%; 
}
.content {
display: block;
overflow:auto;
height:100%;
padding-bottom: 40px;
box-sizing: border-box;
}
footer{ 
position: fixed; 
bottom: 0; 
left: 0; 
background: yellow;
height: 40px;
line-height: 40px;
width: 100%;
text-align: center;
}
.sidebar{
float:left;
background:green;
height:100%;
width:10%;
}
.contents{
float:left;
background:red;
height:100%;
width:90%;
overflow:auto;
}

DEMO 2

1
rkpasia

Wenn Sie Bootstrap mit ein wenig Anpassung verwenden, scheint Folgendes für mich zu funktionieren:

Ich brauche 3 Partitionen in meinem Container und habe folgendes versucht:

CSS:

.row.content {height: 100%; width:100%; position: fixed; }
.sidenav {
  padding-top: 20px;
  border: 1px solid #cecece;
  height: 100%;
}
.midnav {
  padding: 0px;
}

HTML:

  <div class="container-fluid text-center"> 
    <div class="row content">
    <div class="col-md-2 sidenav text-left">Some content 1</div>
    <div class="col-md-9 midnav text-left">Some content 2</div>
    <div class="col-md-1 sidenav text-center">Some content 3</div>
    </div>
  </div>
0
Teejay