web-dev-qa-db-fra.com

Définir la hauteur et la largeur automatiques en CSS/HTML pour différentes tailles d'écran

J'ai 2 problèmes avec cette mise en page:

  1. .feature_content (fond gris) adapte sa hauteur et sa largeur à différentes tailles d'écran. Pour le moment, sur les grands écrans, .feature_content est loin du pied de page.
  2. Il y a une barre de défilement horizontale que je veux supprimer quelle que soit la taille de l'écran.

Je veux: adapter .feature_content à la hauteur restante et supprimer la barre de défilement horizontale.

Voici un VIOLON 

Et mon 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;
}
htmlcsshtml5css3
4
user1358072

C'est ce que tu veux? D&EACUTE;MO . Essayez de réduire la fenêtre du navigateur et vous verrez que les éléments seront commandés.

Qu'est-ce que j'ai utilisé? Modèle de boîte flexible ou Flexbox.

Ajoutez simplement les classes CSS suivantes à votre élément conteneur (dans ce cas, div#container):

flex-init-setup et flex-ppal-setup.

Où:

  1. flex-init-setup signifie configuration de flexbox init; et
  2. flex-ppal-setup signifie configuration principale de flexbox

Voici les règles CSS:

 .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;
 }

Sois bon, Leonardo

5
leoMestizo

/// SOLUTION DEMO 2 WATCH MISE À JOUR ////

J'espère que c'est la solution que vous recherchez! DEMO1DEMO2

Avec cette solution, la seule barre de défilement de la page se trouve au milieu de votre section de contenu Dans cette section, construisez votre structure avec une barre latérale ou ce que vous voulez!

Vous pouvez le faire avec ce code ici:

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

Avec ce 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%;
}

Et un peu de 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();
});

D&EACUTE;MO 1

Si vous ne voulez pas jQuery

<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

En utilisant bootstrap avec un peu de personnalisation, ce qui suit semble fonctionner pour moi:

J'ai besoin de 3 partitions dans mon conteneur et j'ai essayé ceci:

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