Question

我希望为blakehawley.com创建一个页脚类型的东西，它有一些不同的链接等。它应该是一种横幅风格，我的意思是它应该保持在底部并被修复。 div是“菜单”

这是我的HTML：

    <html>

<head>
<link rel="stylesheet" media="all and (min-width: 1378px)" href="style/grid-1378.css">
<link rel="stylesheet" media="all and (min-width: 1218px) and (max-width: 1377px)" href="style/grid-1218.css">
<link rel="stylesheet" media="all and (min-width: 978px) and (max-width: 1217px)" href="style/grid-978.css">
<link rel="stylesheet" media="all and (min-width: 748px) and (max-width: 977px)" href="style/grid-748.css">
<link rel="stylesheet" media="all and (min-width: 0px) and (max-width: 747px)" href="style/grid-400.css">

<link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>

<title>The Official Site of Blake Hawley</title>

</head>
<body>

<div id="homeimage">
<img src="style/images/blakehome.jpg">
</div>

<div id="name">
Blake Hawley
</div>

<div id="maincontent">

<a class="twitter-timeline" href="https://twitter.com/BlakeHawley5" data-widget-id="414439781083267072">Tweets by @BlakeHawley5</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

</div>

<div id="menu">

</div>

</body>
</html>

这是我的CSS：

body{
margin:0 auto;
}

#homeimage{
margin:0 auto;
margin-top:20px;
width:720px;
height:480px;
box-shadow:5px 5px 5px #888888;
}

#name{
text-align:center;
font-family:'Playfair Display', serif;
font-size:130px;
}

#maincontent{
margin-bottom:20px;
}

#menu{
position:fixed;
float:bottom;
height:200px;
width:1218px;
border:3px solid green;
box-shadow:0px -5px 5px #888888;
}

li{
list-style:none;
}

你们看到的任何东西？

Answer 1

#menu{
position:fixed;
bottom: 0px;
height:200px;
width:1218px;
border:3px solid green;
box-shadow:0px -5px 5px #888888;
}

猜猜应该做的伎俩，改变了第二条规则

（也许宽度：100％）

Answer 2

Float用于某些文本中的图像，可以是左边或右边，而不是浮动，你应该使用定位，在你的情况下：

bottom:0px;

另外，如果您希望您的页脚占据整个屏幕，请使用

width:100%;

Answer 3

首先菜单标签是空的（你不能看到它）。

其次，你没有使用左，上，下或右属性来定位它。

和第三，没有像“float：bottom;”这样的东西。

Answer 4

#menu{
position:fixed;
margin:0 auto;/*use it if you want to show middle of the webpage if not remove it*/
left:/* put*/ px;/* use it if you want to move your div from the left postion*/
height:200px;
width:1218px;
border:3px solid green;
box-shadow:0px -5px 5px #888888;
}

keep remember float:bottom is not correct rule more info visit www.w3schools.com !

Answer 5

Why isn't "position:fixed;" keeping my page header in the same place?

这是由于display：flex for #pageTitle而发生的。扩展时的菜单试图适应，推动同一父div中的其他元素。将#pageTitle中的.responsive-menu分隔为新的div。

css位置固定不起作用

5 个答案: