在 CSS/HTML 中为不同的屏幕尺寸设置自动高度和宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17263064/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set auto height and width in CSS/HTML for different screen sizes
提问by user1358072
I have 2 issueswith this layout :
这种布局有两个问题：
.feature_content(grey background) adapt it's height and width to different screen sizes. Right now, on big screens.feature_contentis far from the footer.- There is a horizontal scrollbar that I want to remove regardless to the screen size.
.feature_content（灰色背景）使其高度和宽度适应不同的屏幕尺寸。现在，在大屏幕.feature_content上离页脚还很远。- 无论屏幕大小如何，我都想删除一个水平滚动条。
I want to :adapt .feature_contentto the remaining height and remove the horizontal scrollbar.
我想：适应.feature_content剩余高度并删除水平滚动条。
Here is a FIDDLE
这是一把小提琴
And my code :
我的代码：
HTML:
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:
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;
}
回答by leoMestizo
This is what do you want? DEMO. Try to shrink the browser's window and you'll see that the elements will be ordered.
这就是你想要的？演示。尝试缩小浏览器的窗口，您将看到元素将被排序。
What I used? Flexible Box Model or Flexbox.
我用的什么？弹性盒模型或弹性盒。
Just add the follow CSS classes to your container element (in this case div#container):
只需将以下 CSS 类添加到您的容器元素（在本例中div#container）：
flex-init-setupand flex-ppal-setup.
flex-init-setup和flex-ppal-setup。
Where:
在哪里：
- flex-init-setupmeans flexbox init setup; and
- flex-ppal-setupmeans flexbox principal setup
- flex-init-setup表示flexbox init setup；和
- flex-ppal-setup表示flexbox 主体设置
Here are the CSS rules:
以下是 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;
}
Be good, Leonardo
乖，莱昂纳多
回答by rpasianotto
///UPDATED DEMO 2 WATCH SOLUTION////
///更新演示 2 手表解决方案////
I hope that is the solution you're looking for! DEMO1DEMO2
With that solution the only scrollbar in the page is on your contents section in the middle! In that section build your structure with a sidebar or whatever you want!
使用该解决方案，页面中唯一的滚动条位于中间的内容部分！在该部分中，使用侧边栏或任何您想要的东西构建您的结构！
You can do that with that code here:
您可以在此处使用该代码执行此操作：
<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>
With that css:
有了那个 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%;
}
And a bit of jquery:
还有一点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();
});
DEMO1
演示1
If you don't want jquery
如果你不想要 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
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;
}
DEMO2
演示2
回答by Tejaswini
Using bootstrap with a little bit of customization, the following seems to work for me:
使用带有一点自定义的引导程序，以下内容似乎对我有用：
I need 3 partitions in my container and I tried this:
我的容器中需要 3 个分区，我试过这个：
CSS:
CSS：
.row.content {height: 100%; width:100%; position: fixed; }
.sidenav {
padding-top: 20px;
border: 1px solid #cecece;
height: 100%;
}
.midnav {
padding: 0px;
}
HTML:
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>
