个人中心
gpt4 book ai didi

html - HSS 液态布局问题 : how to fill the entire browser

转载 作者：行者123 更新时间：2023-11-28 09:15:38 26 4
gpt4 key购买 nike

这是 JSFiddle .

我的页面是流式​​布局。侧栏具有恒定宽度。浏览器缩放时，中间部分会自动改变。

我的问题:

  1. 如何使中间部分和侧边栏的高度为 100%。无论页面有多长，侧边栏都会触及底部。这三个部分将始终填满整个浏览器。

  2. 我想用图像填充整个 div。此外，当浏览器尺寸改变时，图片会自动缩放。

这是 HTML:

<div id="left">
    1
</div>
<div id="right">
    1
</div>
<div id="main">
    <img src="img/1.jpg" />
</div>

这是 CSS:

body {
    margin: 0;
    padding: 0;
}
#left {
    float: left;
    width: 100px;
    height: 100%;
    background-color: #000;
}

#right {
    float: right;
    width: 100px;
    height: 100%;
    background-color: #000;
}

#main {
    margin: 0 110px 0 110px;
    background-color: #ccc;
}

最佳答案

如果我没理解错的话。您应该设置 <html> 的高度和 <body> CSS 中的元素到 100% 然后 <div> s 应该占据整个页面的高度。

HTML:

<div id="left">
    1
</div>
<div id="right">
    1
</div>
<div id="main">
    <img src="img/1.jpg"/>
</div>

CSS:

html {
    height: 100%; /*set to 100%*/
}
body{
    height: 100%; /*set to 100%*/
    margin: 0;
    padding: 0;
}
#left{
    float: left;
    width: 100px;
    height: 100%;
    background-color: #000;
}
#right{
    float: right;
    width: 100px;
    height: 100%;
    background-color: #000;
}
#main{
    height: 100%; /*set to 100%*/
    margin: 0 110px 0 110px;
    background-color: #ccc;
}

编辑:

将此应用到您的 CSS，然后您的图像应占据主 <div> 的整个空间.
注意:这不会保留图像纵横比!(感谢 aug 指出这一点。)
要删除垂直滚动条，只需设置 vertical-align 属性。(感谢 Mary Melody 的提示。)

#main img{
    vertical-align: middle; /*removes vertical scroll bar*/
    height: 100%;
    width:  100%;
}

我注意到您还可以添加 overflow:hidden;到 #main CSS 规则，如下所示:

#main{
    overflow: hidden; /*will removes vertical scroll bar too*/
}

Here is a JSFiddle.

关于html - HSS 液态布局问题 : how to fill the entire browser，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26312854/

26 4 0
文章推荐： html - 固定 div 内的可滚动 div
文章推荐： css - 如果选中复选框但先设置标签然后输入，如何突出显示标签？
文章推荐： javascript - 将 ngModel 与 contenteditable 标签一起使用
文章推荐： css - 在 SCSS 中，% 符号表示什么？
行者123
个人简介

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

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