个人中心
gpt4 book ai didi

html - CSS/HTML : Handling Fluid Layouts and Height?

转载 作者：行者123 更新时间：2023-11-28 09:50:22 25 4
gpt4 key购买 nike

下面是一个演示此问题的示例: http://jsfiddle.net/93twL/

这是代码(与 jsfiddle 相同):

<body>
    <header>
        <h1>
            Heading
        </h1>
    </header>
    <div id="container">
        <div id="left">
            <h3>
                Left
            </h3>
            <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id. 
            </p>
        </div>

        <div id="main">
            <h3>
                Main
            </h3>

                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id. 


                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id. 
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id. 
            </p>
        </div>
        <div id="right">
            <h3>
                Right
            </h3>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, 
            </p>
        </div>

        <footer id="footer">
            <h3>
                Footer
            </h3>
        </footer>
    </div>

</body>
</html>

html{
    min-height:100%;
    height:100%;
}
body{
    height:100%;
    width:100%;
    margin:0;
    box-shadow: inset 0 0 1px 1px black;
}
h1{ 
    margin-top:0;
}
#container{
    clear:both;
    width:100%;
    height:100%;
    float:left;
    box-shadow: inset 0 0 1px 1px black;
}

#header{
    min-height:12%;
    clear:both;
    float:left;
    width:100%;
    box-shadow: inherit;
}
#footer{
    min-height:10%;
    box-shadow: inherit;
    clear:both;
    float:left;
    width:100%;
}
#left{
    float:left;
    box-shadow: inherit;
    width:24.5%;
    padding:0.5%;
    min-height:50%;
}

#main{
    float:left;
    box-shadow: inherit;
    width:48%;
    min-height:50%;
    padding:0.5%;
}

#right{
    float:left;
    box-shadow: inherit;
    width:24.5%;
    padding:0.5%;
    min-height:50%;
}

如示例中的边界所示，一旦内容超过 100% 高度，内容就会溢出。我宁愿让元素展开。

要解决此问题，可以删除指定高度。但是，如果没有指定高度，那么我应该如何控制所有内容的高度？(使用百分比) 我需要按钮、页眉、页脚等需要为其设置高度的内容。 (如果 HTML 和 BODY 没有 100% 高度，其他元素将无法使用百分比设置高度)

如果不清楚，我指的是高度以百分比给出的流体布局。

那么这是否可能，或者我应该放弃它？

最佳答案

我认为您想要的是 100% 和 100% 高度的流动宽度，以便内容在垂直和水平方向上扩展。这是一件很难的事情，不能单独使用 css 来完成，flexbox 可能可以做到，虽然我不知道。我最近看到它是用 CSS 和 jQuery 在页眉和页脚上使用固定高度完成的，但其余部分是流动的高度和宽度:

http://codepen.io/anon/pen/EsJHu

我在这里提高了响应速度:http://jsbin.com/momep/7/edit

CSS

/* Reset  */
* { 
    margin: 0;
    padding: 0;
}


/* Sticky footer */
html, body {
    height: 100%;
    width: 100%;
}
#page {
    height: 100%;
    height: auto !important;
    min-height: 100%;
}
#sticky-footer-wrap {
    overflow: auto;
    padding-bottom: 100px;
}
.site-main {
    overflow: hidden;
    height: 100%;
}
.site-footer {
    position: relative;
    height: 100px;
    margin-top: -100px;
    clear: both;
}


/* Header  */
.site-header {
    height: 100px;
}

@media (min-width:992px) {
/* 3 columns */
#primary {
    float: left;
    width: 50%;  
    margin-left: 25%;
}
#secondary {
    float: left;
    width: 25%;
    margin-left:-75%;
}
#tertiary{
    float: left;
    width: 25%;
}
}

/* Colours */
.site-header {
    background: #C5E0DC;
}
#primary {
    background-color: #F1D4AF;
}
#secondary {
    background-color: #ECE5CE;
}
#tertiary{
    background-color: #E08E79;
}
.site-footer {
    background: #774F38;
}

HTML

<div id="page">
    <div id="sticky-footer-wrap">
        <header class="site-header">
            <h3>Header</h3>
        </header>
            <div class="site-main">
            <div id="primary">
            <h2>Primary content</h2>
            <h1>Layout Features</h1>
            <ul>
                <li>Header (fixed height)</li>
                <li>3 fluid columns</li>
                <li>100% or full height columns (jQuery)</li>
                <li>Sticky footer (fixed height)</li>
                <li>Correct source order of columns</li>
                <li>IE8 compatible (Modernizr)</li>
            </ul>
            </div>              
            <div id="secondary">
                <h3>Secondary content</h3>
            </div>
            <div id="tertiary">
                <h4>Tertiary content</h4>
            </div>
        </div>
    </div>
</div>
<footer class="site-footer">
    <h3>Footer (sticky)</h3>
</footer>

jQuery

// On page load
$(window).load(columnHeight);

// On window resize
$(window).resize( function () {
    // Clear all forced column heights before recalculating them after window resize
    $("#primary").css("height", "");  
    $("#secondary").css("height", "");
    $("#tertiary").css("height", "");
    columnHeight();
});

// Make columns 100% in height
function columnHeight() {
    // Column heights should equal the document height minus the header height and footer height
    var newHeight = $(document).height() - $(".site-header").height() - $(".site-footer").height() + "px";
    $("#primary").css("height", newHeight);
    $("#secondary").css("height", newHeight);
    $("#tertiary").css("height", newHeight);
}

关于html - CSS/HTML : Handling Fluid Layouts and Height?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25107772/

25 4 0
文章推荐： css - 使用 CSS 曲线
文章推荐： html - 移动浏览器忽略 iframe 高度
文章推荐： javascript - 动态内容均匀分布在 2 列之间
文章推荐： HTML:

标签下推 float 的

行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com