在HTML

时间：2016-02-24 08:26:46

标签： html css

我正在构建一个包含多个不同部分的页面，这些部分都会动态更改内容，但是如果存在溢出，我希望它们是固定大小并显示滚动条（仅适用于该部分）。 在实践中，我有三个主要部分（div）;两个应该满足固定大小和溢出属性，一个作为页脚，应该固定在屏幕的底部，永远不会改变大小。

我的问题是，我似乎无法弄清楚如何订购和定位这些部分，而不会相互重叠或溢出不按预期工作。 基本上我希望页脚占据它所需的空间，但总是被限制在屏幕的底部。然后，其他两个部分应占据页面其余部分的50％。永远不需要滚动条到页面本身 - 而是需要两个部分中的每个部分，因为它们的内容会有所不同并且可能会溢出。

我尝试了很多不同的解决方案，但这里有一个关于我一直在使用的简化示例：

Very quick mock up 

<div id="page" style="position:relative; margin-top:45px">
    <div id="wrapper" style="height:100%; margin-bottom:3.5em">
        <div id="block-a" style="height:50%; overflow: auto; padding:0; position:relative">
            <h2>...</h2>
            <br/>
            <div id="dynamicGrid"></div>
            <br/>
            <button>...</button>
        </div>
        <div id="block-b" style="height:50%; padding:0; position:relative"> 
            <div style="padding-bottom:0">
                <ul id="listHeader">
                    <li id="header">...</li>
                    <li  id="addNew">
                        <a>...</a>
                    </li>
                </ul>
            </div>
            <div id="listSection" style="overflow: auto"> 
                <ul id="list"></ul>
            </div>
        </div>
    </div>
    <div id="footer" style="position:fixed; left:0; right:0; bottom:0">
        <ul> 
            <li>
                <label>...</label>
                <label>...</label>
                <label>...</label>
            </li>
        </ul>  
    </div>
</div>

'page'div相对于body定位，同时包含标题（从顶部45 px）。 id为'list'的列表是动态获取列表元素的列表，div'dynamicGrid'包含一堆选择，输入和标签。 div'listSection'是我想独立溢出的，这也是'block a'的情况。

我遇到的一个大问题是，我似乎无法定义页脚创建后留下的空间。理论上我想要像高度：100％-sizeOf（页脚）......

一个重要的规则是，这个页面必须在大多数主流浏览器中工作，并且必须在不同的屏幕尺寸上“工作”（我想避免使用px太多，而是使用％）

现在我使用内联html样式，但使用CSS的答案也很好。 我使用JavaScript和Jquery来控制页面，但是应该使用html设置布局。

2 个答案:

答案 0 :(得分：0)

有两种方法可以做到这一点：

  • JavaScript / jQuery
  • 普通CSS（使用vh，但IE支持是粗略的）

方法1

JavaScript / jQuery

查看此JSFiddle

基本上它使用jQuery来计算主体的高度并移除页脚的高度，然后将它除以2以获得每个块的高度

这是JavaScript / jQuery代码：

// Set the height of the #page element to be the full height of the window
$('#page').height($(window).height() + 'px')

// Save page height
var page_height = $('#page').height()

// Save page height - footer height
var height_without_footer = page_height - $('#footer').height()

// Calculate the size of each block
var block_height = height_without_footer / 2

// Set each block height
$('.block').css('height', block_height + 'px')

这是我使用的CSS（它几乎就是你所拥有的，只是在样式表而不是内联中）。我唯一改变的是我添加overflow: scroll以确保.block有滚动条并且没有调整大小，或者它们的内容重叠：

#footer {
    background-color: #000;
    color: #FFF;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
}

.block {
    overflow: scroll;
    padding: 5px;
}

/* Just to remove default CSS added by JSFiddle and browsers */
body, h1 {
    margin: 0;
}

方法2

普通CSS（vh）

您还可以使用视口单位（相对于视口设置大小），但IE support是粗略的

这是JSFiddle

它使用以下CSS：

#footer {
    background-color: #000;
    color: #FFF;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 10vh;
}

.block {
    overflow: scroll;
    padding: 5px;
    height: 45vh;
}

/* Just to remove default CSS added by JSFiddle and browsers */
body, h1 {
    margin: 0;
}

vh代表 V iewport H 8（您还可以使用vw代表 V iewport <强> w ^ IDþ）。这些单元必须加起来<或==加100。

  • 在这种情况下，每个.block为45vh，有2个区块，因此45 * 2为90
  • #footer为10vh

90vh + 10vh为100vh，表示该页面永远不会大于视口。

答案 1 :(得分：-1)

这是你在找什么？使用vw单位的宽度，以使其适应任何视口宽度。可以使用jQuery动态计算和分配高度。

$(document).ready(function() {

  var windowHeight = $(window).height();
  var footerHeight = $('#footer').height();

  $('#container').height((windowHeight - footerHeight) + 'px');
  $('#container1').height((windowHeight - footerHeight) / 2 + 'px');
  $('#container2').height((windowHeight - footerHeight) / 2 + 'px');

});
body {
  margin: 0px;
  padding: 0px;
}
#footer {
  position: absolute;
  width: 100vw;
  height: auto;
  bottom: 0;
  background: #ccc;
}
#container {
  position: realtive;
}
#container1 {
  width: 100vw;
  background: #f1f1f1;
  overflow: scroll;
}
#container2 {
  width: 100vw;
  background: #444;
  color: white;
  overflow: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="container1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper, nunc ac hendrerit imperdiet, risus est fermentum dui, a ornare lorem justo imperdiet diam. Proin id vestibulum nisl. Suspendisse potenti. Aenean eu elit hendrerit, semper sapien
    nec, dignissim lorem. Quisque urna ante, hendrerit sed eros a, consequat viverra massa. Nulla egestas est quis sem scelerisque congue. Praesent faucibus sapien eros, et gravida ligula interdum eu. Proin aliquet urna eget convallis auctor. Donec ullamcorper
    cursus fringilla. Morbi dapibus lorem in nisl vestibulum, volutpat tristique urna sagittis. Nunc id condimentum sem. Donec pulvinar vestibulum convallis. Vivamus sit amet orci ante. Donec pulvinar, libero at interdum feugiat, neque sem imperdiet turpis,
    venenatis maximus ante justo nec augue. Praesent a hendrerit felis, sed mollis nulla. Aliquam fermentum accumsan leo, quis pulvinar mi egestas a. Aenean non odio mollis dui porta volutpat. Integer semper ante ac ligula vulputate pharetra. Pellentesque
    et scelerisque leo. Aliquam congue blandit metus, quis interdum felis. Fusce suscipit ac leo in hendrerit. Nulla semper tempus felis finibus eleifend. In quis orci nunc. Donec imperdiet tellus et cursus semper. Vivamus mauris sem, dapibus at porta
    viverra, mattis ut lorem. Suspendisse eleifend commodo nisl ultricies convallis. In fringilla mauris in urna elementum venenatis.

  </div>
  <div id="container2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper, nunc ac hendrerit imperdiet, risus est fermentum dui, a ornare lorem justo imperdiet diam. Proin id vestibulum nisl. Suspendisse potenti. Aenean eu elit hendrerit, semper sapien
    nec, dignissim lorem. Quisque urna ante, hendrerit sed eros a, consequat viverra massa. Nulla egestas est quis sem scelerisque congue. Praesent faucibus sapien eros, et gravida ligula interdum eu. Proin aliquet urna eget convallis auctor. Donec ullamcorper
    cursus fringilla. Morbi dapibus lorem in nisl vestibulum, volutpat tristique urna sagittis. Nunc id condimentum sem. Donec pulvinar vestibulum convallis. Vivamus sit amet orci ante. Donec pulvinar, libero at interdum feugiat, neque sem imperdiet turpis,
    venenatis maximus ante justo nec augue. Praesent a hendrerit felis, sed mollis nulla. Aliquam fermentum accumsan leo, quis pulvinar mi egestas a. Aenean non odio mollis dui porta volutpat. Integer semper ante ac ligula vulputate pharetra. Pellentesque
    et scelerisque leo. Aliquam congue blandit metus, quis interdum felis. Fusce suscipit ac leo in hendrerit. Nulla semper tempus felis finibus eleifend. In quis orci nunc. Donec imperdiet tellus et cursus semper. Vivamus mauris sem, dapibus at porta
    viverra, mattis ut lorem. Suspendisse eleifend commodo nisl ultricies convallis. In fringilla mauris in urna elementum venenatis.
  </div>
</div>
<div id="footer">
  Footer
</div>

相关问题
最新问题