4

我对这个布局有2 个问题：

  1. .feature_content（灰色背景）使其高度和宽度适应不同的屏幕尺寸。现在，在大屏幕.feature_content上离页脚还很远。
  2. 无论屏幕大小如何，我都想删除一个水平滚动条。

我想：适应.feature_content剩余高度并移除水平滚动条。

这是一个小提琴

我的代码：

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

3 回答 3

5

这就是你想要的？演示。尝试缩小浏览器的窗口，你会看到元素是有序的。

我用了什么？弹性盒模型或弹性盒。

只需将以下 CSS 类添加到您的容器元素（在本例中div#container）：

flex-init-setup和flex-ppal-setup。

在哪里：

  1. flex-init-setup表示flexbox 初始化设置；和
  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;
 }

做个好人，莱昂纳多

于 2013-06-23T18:25:44.770 回答
1

///更新的演示 2 观看解决方案////

我希望这是您正在寻找的解决方案！ 演示1 演示 2

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

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

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

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

演示2

于 2013-06-23T17:12:42.397 回答
0

使用带有一点定制的引导程序，以下似乎对我有用：

我的容器中需要 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>
于 2017-03-21T11:49:46.370 回答