个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
28
4
很抱歉，如果之前有人问过这个问题，但我一直在寻找，但仍然无法想出一个基本设计来实现我想要的布局(确认我不想要顶部和底部的空白)
我拥有一个个人摄影网站，我将我的业余摄影作品发布给 friend 和家人，我想让它看起来更好一点，在我的脑海中，我希望每个页面都不可滚动，我会确保内容合理地适合空间。
我目前并不担心移动设备和平板设备上的空间有限，因为当我有了基本结构后，我计划制作一个移动设备和一个平板电脑页面，这样我就可以指定设计而不是一个流动的网站。 (我可能会在以后转移到这个)
所以我想将下面的示例作为我的页面布局
我不确定我的代码离我有多远我相信我已经差不多了，我只是错过了允许我的主 div 被限制在结束之间屏幕上剩余的可用空间的位hr noshade 并在页脚 div 开始之前停止，这将允许图片成为 div 的 100% 高度并且图片(或其他对象)将根据查看区域的大小重新调整大小
我真的很感谢任何帮助，如果之前有人问过，我再次道歉，我尽力不建立表格格式的网站，因为我知道这是现在非常古老的编码方式
我做了一些研究，认为我可能需要使用 jquery squirt 来设置文档/窗口的高度，但由于我是新手，我找不到一个好的例子
总而言之，我只想让主 div 从 hr noshade 行的底部延伸到页脚的顶部。
@charset "utf-8";
/* CSS Document */
* {
padding: 0px;
margin: 0px;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
* html #outer {
/* ie6 and under only*/
height: 100%;
}
.content {
padding-top: 20px;
}
.wrapper {
min-height: 100%;
margin: -20px auto 0;
/*Change this to change height of footer must match .footer height number*/
width: 70%;
}
.footer {
height: 20px;
/*Change this to change height of footer must match .wrapper margin -number*/
background-color: #2C5463;
text-align: center;
width: 70%;
color: #FCFCFC;
margin-left: auto;
margin-right: auto;
border-radius: 151px;
}
.title {
font-size: 50px;
font-family: tangerine;
font-style: normal;
font-weight: 700;
font-variant: normal;
color: #2C5463;
float: left;
width: 100%;
margin-bottom: 2px;
margin-top: 10px;
}
.main {
float: left;
width: 100%;
background-color: #F80307;
}
hr {
border-radius: 208px;
border-width: 2px;
border-color: #2C5463;
}
.menu {
text-align: center;
color: #FCFCFC;
background-color: #2C5463;
float: left;
width: 100px;
margin-right: 5px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
border-radius: 38px;
}
.menu2 {
text-align: center;
color: #FCFCFC;
background-color: #2C5463;
float: Right;
width: 100px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
border-radius: 38px;
}
.menuwrapper {
width: 100%;
float: left;
margin-top: 2px;
margin-bottom: 2px;
}<!DOCTYPE html>
<html lang="en">
<head>
<!--Start of CSS Link-->
<link href="test.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background-color: #e4e5e7;
}
</style>
<!--End of CSS Link-->
<!--Start of Fonts-->
<script>
var __adobewebfontsappname__ = "dreamweaver"
</script>
<script src="http://use.edgefonts.net/tangerine:n4,n7:default.js" type="text/javascript"></script>
<!--End of Fonts-->
<meta charset="utf-8">
</head>
<!--Start of Webpage-->
<body>
<!--Start of Page Wrapper (no main content above this line-->
<div class="wrapper">
<!--Start of Main Content-->
<div class="content">
<!--Start of Page Content-->
<!--Start of Title-->
<div class="title">
<p>Skc Photography</p>
</div>
<!--End of Title-->
<!--Start of Member Login--
<div class="login"><p>Member Login</p></div>
<!--End of Member Login-->
<!--Start of line-->
<hr noshade>
<!--Start of line-->
<!--Start of Menu-->
<div class="menuwrapper">
<div class="menu">
<p>Home</p>
</div>
<div class="menu">
<p>Galleries</p>
</div>
<div class="menu">
<p>Contact Me</p>
</div>
<div class="menu2">
<p>Member Login</p>
</div>
</div>
<!--End of Menu-->
<!--Start of line-->
<hr noshade>
<!--Start of line-->
<!--Start of Main Content-->
<div class="main">This div needs to stretch to top of the Footer and not past it.
</div>
<!--End of Main Content-->
</div>
<!--End of Page Content-->
</div>
<!--End of Page Wrapper (no main content Below this line-->
<!--Start of Footer-->
<div class="footer">SKCPhotography - Copyright © 2014</div>
<!--End of Footer-->
</body>
<!--End of Webpage-->
</html>最佳答案
你可以只添加一个 position: absolute 到 .main div，然后添加父 .wrapper position: relative ，然后从那里开始工作，检查一下 here
.main{
position: absolute;
bottom: 0;
top: 126px;/*the height of the header menu, hr etc.*/
right: 0;
}
.wrapper{
position: relative;
}
关于javascript - 全页面布局的基本设计，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27160238/
28
4
0
如何将十进制数字转换为mixed radix表示法？ 我猜想给定每个基数数组的输入和十进制数，它应该输出每列值的数组。 最佳答案 伪代码: bases = [24, 60, 60] input = 8
我有 Table-A，其中有“x”行。 (对于这个例子有 8 行) 我通过使用游标创建了列数为“x”的Table-C。 (使其动态化；如果将更多行添加到 Table-A，则会在 Table-C 中创建
我有一个关于对象的(很可能是简单而愚蠢的)问题。我创建了实例“Person”的对象“jon”。当我打电话时 console.log(jon.name) 控制台会给我输出“jon”。到目前为止，一切都很
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: javascript function vs. ( function() { … } ()); 抱歉，如果这太基础了
我正在尝试用 Java 重新创建射弹轨迹，但是，我遇到了一些问题。我看过很多解释公式之类的视频，但他们的方程中有一个目标，而我没有。我的意思是，他们有一个范围来计算子弹的下落，但我试图弄清楚子弹最终会
(希望如此)来自一个完整的 Rust 初学者的一个简单问题。我的循环有什么问题？ num 计算结果为“69”的速度相当快，但是一旦 num 设置为“69”，循环就永远不会退出。我肯定遗漏了一些明显的东
我在 id="name"的元素上应用“.length”，但它计数为 29 而不是 14。我想知道我的错误在哪里？如果有人可以让我知道，那就太好了。谢谢! var name=document.getEl
我知道这很简单，但由于某种原因我无法让它工作。我正在尝试在 Java 中创建自定义颜色，但它似乎不起作用。 import java.awt.Color; Color deepGreen = new C
我有一个大文件，其中每一行都包含一个子字符串，例如 ABC123。如果我执行 grep ABC file.txt 或 grep ABC1 file.txt 我按预期返回这些行，但如果我执行 grep
我想将以下实体映射转换为 Priority 对象。在 getter 上，当我将“Short”更改为“Priority”并遵循 this.priority 时，它会提示 'basic' 属性类型不应该是
我正在开发一个相当基本的函数，我发现很难弄清楚为什么我会得到我的输出。 def mystery(n): print(n) if n < 4: my
我正在尝试对 WordPress 安装的新闻部分实现同位素过滤。我是 JavaScript/jQuery 的新手，正在尝试随时随地学习。我首先使用 Filters section of the Iso
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。 这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
我在另一个实体类中引用一个实体并收到此错误。下面是示例代码。我在 persistence.xml 中也有这些类。 是什么导致了这个问题？我正在使用 Spring 数据 JPA 和 Hibernate。
我正在解析 HTML 并重新格式化图像以使其更好地适应。由于某种原因，当我有多个图像需要解析时，我会超出范围，而且我一生都无法弄清楚为什么。 当 imgArray.count >1 时，我将使用带有递
我是 SQL 新手，正在尝试创建一个基本的子查询。我需要找出经理的平均年龄和实习生的平均年龄之间的差异。 标题为一栏 - 经理或实习生年龄是一列，全部在同一个表中。 我会使用两个子查询来做类似的事情:
我习惯了 csh，所以不得不使用 bash 有点烦人。这段代码有什么问题？ if[$time > 0300] && [$time 和 300 && time < 900 )) then mod
我建立了这个页面:http://excelwrestling.com/poola.php即将到来的双重锦标赛。我的大部分数据都是从我的 mySQL 数据库中提取的，现在只有一些示例数据。 我希望链接选
是否有任何原因导致以下内容不起作用: for (i=0;i < someArray.length;i++) { if (someArray[i].indexOf("something") !=
我现在正在学习 Javascript，有一个问题一直困扰着我! 因此，我在这里所需要做的就是在此输入框中键入颜色，单击按钮并将标题更改为键入的颜色(仅当键入的颜色位于变量中指定的数组中时)。 我的代码
我是一名优秀的程序员,十分优秀！