二固定件（页眉和页脚）

Layout illustration

我希望我已经用图片解释得很好。我在这个主题上搜索了很多，但我真的不想进入大量的功能。我想尽可能简单地解决它。

问题是因为如果用户更改浏览器大小或在不同的屏幕上显示，我希望所有人都是实时响应。

另外，关于在左侧菜单中添加这些图像;它们的比例是1：1，但是我想将它们缩放在一起，它们将是左菜单的100％高度（蓝色）。

这是我到目前为止有：

HTML/CSS：

header { 
 
    background-color: red; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
#allContents { 
 
    position: relative; /*minus širina headerja in footerja!!*/ 
 
    height: 100%; 
 
    width: 100%; 
 
    float: left; 
 
    clear: both; 
 
    z-index: 10; 
 
} 
 

 
#leftMenu { 
 
    position: relative; 
 
    background-color: green; 
 
    width: 10%; 
 
    height: 100%; 
 
    z-index:10; 
 
} 
 

 
#mainContent { 
 
    background-color: yellow; 
 
    size: 20%; 
 
    float: left; 
 
    position: relative; 
 
} 
 

 
#rightMenu { 
 
    background-color: orange; 
 
    float: left; 
 
    position: relative; 
 
    top: 0; 
 
    right: 0; 
 
    width: 25%; 
 
} 
 

 
footer { 
 
    clear: both; 
 
    background-color: blue; 
 
    position: fixed; 
 
    bottom: 0px; 
 
    width: 100%; 
 
}

<header> 
 
    Fixed. Some header content... also image on the left. 
 
</header> 
 

 
<div id="allContents"> 
 
    <div id="leftMenu">On left, between header and footer, but never behind. Always between.</div> 
 
    <div id="mainContent">Between all 4 elements. Here will be main content with scrolling.</div> 
 
    <div id="rightMenu">Div with some news.</div> 
 
</div> 
 

 
<footer> 
 
    Fixed footer. 
 
</footer>

来源

2016-07-28 HelloDarkness

听起来像是你将极大地从使用Flexboxes受益。它们允许您使用CSS格式化所需的确切结构，并且它们响应窗口大小。 Flexbox Froggy是学习如何使用它们的好资源。

来源

2016-07-28 21:18:03 tcasey

这是acctually伟大：d看起来很promissing，谢谢。我也发现这个指南[链接] https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – HelloDarkness

其他元素的作品，因为我想，但我需要滚动查看页脚 – HelloDarkness

@HelloDarkness这是因为我在CSS的第3行添加了'height：100vh'到'body，html'。你可以把它拿出来，那些div只会和其中的内容一样“高”。此外，如果这确实对你有用，那么除了它作为答案，你可以吗？ – tcasey

您是否正在寻找？

header { 
 
    background-color: red; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
#allContents { 
 
    position: relative; /*minus širina headerja in footerja!!*/ 
 
    height: 100%; 
 
    width: 100%; 
 
    float: left; 
 
    clear: both; 
 
    z-index: 10; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
} 
 

 
#leftMenu { 
 
    position: relative; 
 
    background-color: green; 
 
    width: 10%; 
 
    height: 100%; 
 
    z-index:10; 
 
    
 
} 
 

 
#mainContent { 
 
    background-color: yellow; 
 
    size: 20%; 
 
    float: left; 
 
    position: relative; 
 
    
 
} 
 

 
#rightMenu { 
 
    background-color: orange; 
 
    float: left; 
 
    position: relative; 
 
    top: 0; 
 
    right: 0; 
 
    width: 25%; 
 
    
 
}

<header> 
 
    Fixed. Some header content... also image on the left. 
 
</header> 
 

 
<div id="allContents"> 
 
    <div id="leftMenu">On left, between header and footer, but never behind. Always between.</div> 
 
    <div id="mainContent">Between all 4 elements. Here will be main content with scrolling.</div> 
 
    <div id="rightMenu">Div with some news.</div> 
 
</div> 
 

 
<footer> 
 
    Fixed footer. 
 
</footer>

来源

2016-07-29 07:59:19

页脚仍然不在屏幕的底部，如果窗口大于（大约）500px标题比其他元素更进一步。无论如何，我感谢您的帮助:) – HelloDarkness

是的，你可以通过添加这种风格页脚{position：fixed; bottom：0; background：yellow;宽度：100％; text-align：center;} –

这会使其他元素在它下面（如果页脚有固定的位置）？ – HelloDarkness

二固定件（页眉和页脚）

回答

相关问题