为CSS和HTML设置不同屏幕尺寸的自动高度和宽度

时间:2013-06-23 16:55:13

标签: html css html5 css3

我有 2个问题这个布局:

  1. .feature_content灰色背景)使其高度和宽度适应不同的屏幕尺寸。现在,在大屏幕上.feature_content远离页脚。
  2. 无论屏幕尺寸如何,我都想删除水平滚动条。
  3. 我想:.feature_content适应剩余的高度并移除水平滚动条。

    这是 FIDDLE

    我的代码:

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

3 个答案:

答案 0 :(得分:5)

这是你想要的? DEMO。尝试缩小浏览器的窗口,您将看到元素将被订购。

我用过什么?灵活的盒子模型或Flexbox。

只需将以下CSS类添加到容器元素(在本例中为div#container):

flex-init-setupflex-ppal-setup

其中:

  1. flex-init-setup 表示 flexbox init setup ;和
  2. flex-ppal-setup 表示 flexbox主要设置
  3. 以下是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;
     }
    

    好, 莱昂纳多

答案 1 :(得分:1)

///更新的演示2手表解决方案////

我希望这是您正在寻找的解决方案! DEMO1 DEMO2

使用该解决方案,页面中唯一的滚动条位于中间的内容部分! 在该部分中使用侧边栏或任何您想要的内容构建您的结构!

您可以在此处使用该代码执行此操作:

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

用那个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%;
}

还有点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

如果你不想要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

答案 2 :(得分:0)

使用bootstrap进行一些自定义,以下似乎对我有用:

我的容器中需要3个分区,我试过这个:

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>