Activez le réglage automatique de la hauteur et la largeur en CSS/HTML pour différentes tailles d'écran

J'ai 2 questions avec cette mise en page :

  1. .feature_content (fond gris) adapter la hauteur et la largeur pour les différentes tailles d'écran. Maintenant, sur des écrans géants .feature_content est loin d'être le pied de page.
  2. Il y a une barre de défilement horizontale que je veux supprimer, indépendamment de la taille de l'écran.

Je veux : adapter .feature_content pour le reste de la hauteur et de supprimer la barre de défilement horizontale.

Ici est 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;
}
Est .featured_content ensemble de position: fixed parce que vous avez réellement besoin c'est d'être dans une position fixe indépendant de défilement ou parce que vous ne pouvait pas comprendre de toute autre manière pour elle d'être à la droite de votre contenu?

OriginalL'auteur user1358072 | 2013-06-23

  1. 5

    C'est ce que voulez-vous? DÉMO. Essayez de réduire la fenêtre du navigateur et vous verrez que les éléments seront commandés.

    Ce que j'ai utilisé? Modèle de Boîte Flexible ou Flexbox.

    Il suffit d'ajouter le suivi des classes CSS à votre conteneur de l'élément (dans ce cas div#container):

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

    Où:

    1. flex-init-installation signifie flexbox init installation; et
    2. flex-ppal-installation signifie flexbox principal de configuration

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

    Être bon,
    Leonardo

    Flexbox n'est pas en cours de révision, c'est un Candidat à la Recommandation (ce qui signifie qu'il est considéré comme suffisamment stables pour les fournisseurs de Navigateur pour commencer à mettre en œuvre). Prise en charge du navigateur n'est pas bon en ce moment, soit (n IE<10). Vous avez manqué vos propriétés dans .flex-ppal-setup (n ° 2009 Flexbox mise en œuvre prend en charge l'emballage, et vous êtes absent le 2009/2012 propriétés qui correspondent à justifier de contenu).
    Je ne savais pas que sur la différence entre en cours de révision et Candidat Recommandation. Merci pour l'info! Mais je ne comprends pas ce que tu veux dire à propos de la oroperties dans .flex-ppal-setup =/

    OriginalL'auteur leoMestizo

  2. 1

    ///MISE A JOUR DEMO 2 REGARDER SOLUTION////

    J'espère que c'est la solution que vous cherchez! DEMO1 DEMO2

    Avec cette solution, la seule barre de défilement dans la page de votre contenu de l'article dans le milieu!
    Dans cette section de construire 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 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É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;
}

    DÉMO 2

    il ne fonctionne toujours pas pour moi. C'est toujours le même problème 🙁
    À moins que l'OP ajoute la balise javascript, il est préférable de ne fournir que des pur CSS solutions (même lors de la JS tag est ajouté, pur CSS > javascript).
    j'ai essayé de fournir un pur css et encore ne peut pas le gérer.
    Pouvez-vous être plus précis quant à ce que ne fonctionne pas? Parce que on dirait qu'il travaille pour moi.
    ok... est-ce que le problème est : content_features est parfaitement collant dans le pied de page de mon écran d'ordinateur portable, mais il est loin d'être le pied de page dans un grand écran. et c'est aussi sur le pied de page avec une barre de défilement dans un autre petit écran de l'ordinateur portable. ma mise en page a l'air bien mais les caractéristiques ne sont pas dans la même position des différentes tailles d'écran.

    OriginalL'auteur rkpasia

  3. 0

    À l'aide de bootstrap avec un peu de personnalisation, à la suite 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>

    OriginalL'auteur Teejay