为不同的屏幕尺寸在CSS / HTML中设置自动高度和宽度 [英] Set auto height and width in CSS/HTML for different screen sizes

问题描述

我有 2个问题：

1. .feature_content （灰色背景），将其高度和宽度调整为不同的屏幕尺寸。现在，在大屏幕上 .feature_content 远离页脚。


2. 有一个水平滚动条， c $ c>到剩余高度，并移除水平滚动条。
   
   
   

   这里是 FIDDLE

   
   
   

   我的代码：

   
   
   

   HTML ：

    < div id =container> 
   < div id =header>标题仅添加为演示目的< / div> 
   < div id =content>您的内容到这里
   < 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：gray; 
    position：fixed; 
    margin：auto 0px; 
    margin-top：150px; 
   } 
     

   
   

   解决方案

   ？ DEMO 。尝试缩小浏览器的窗口，您会看到元素将被排序。

   
   
   

   我使用了什么？弹性框模型或Flexbox。

   
   
   

   只需添加以下CSS类到您的容器元素（在这种情况下 div＃container ）：

   
   
   

   flex-init-setup 和 flex-ppal- code>。

   
   
   

   其中：

   
   
   1. init-setup 意味着 flexbox init设置;和
   
   
   2. flex-ppal-setup 意味着 flexbox主体设置
   
   

   这里是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; 
   } 
     

   好，
   Leonardo

   
   

   I have 2 issues with this layout :

   1. .feature_content (grey background) adapt it's height and width to different screen sizes. Right now, on big screens .feature_content is far from the footer.
   2. There is a horizontal scrollbar that I want to remove regardless to the screen size.

   I want to : adapt .feature_content to the remaining height and remove the horizontal scrollbar.

   Here is a FIDDLE

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

   解决方案

   This is what do you want? DEMO. Try to shrink the browser's window and you'll see that the elements will be ordered.

   What I used? Flexible Box Model or Flexbox.

   Just add the follow CSS classes to your container element (in this case div#container):

   flex-init-setup and flex-ppal-setup.

   Where:

   1. flex-init-setup means flexbox init setup; and
   2. flex-ppal-setup means flexbox principal setup

   Here are the CSS rules:

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

   Be good, Leonardo

   这篇关于为不同的屏幕尺寸在CSS / HTML中设置自动高度和宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！