个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我很高兴使用 3 column layout如 alistapart.com 中所述。除非有哈希 url，否则它工作得很好。所以我的中心栏内容完美地显示了 http://www.jahajee.com/CDC-Renewal-Procedure/7890/1.html但是当 url 更改为 http://www.jahajee.com/CDC-Renewal-Procedure/7890/1.html#24873 时内容丢失.
我发现 CSS #container .column{padding-bottom:10010px;margin-bottom:-10000px;} 是问题所在!上述 css 规则需要使所有 3 个 column 具有相同的高度，并定义一个 container 来包裹第 3 个列。当我删除此条件时，内容保留在视口(viewport)中，但列的高度不等!
相关的CSS
#container{padding-left:200px;padding-right:240px;overflow:hidden;}
#container .column{position:relative;float:left;padding-bottom:10010px;margin-bottom:-10000px;}
#centre{width:100%;padding:10px 20px;}
#left{width:180px;padding:0 10px;right:240px;margin-left:-100%;background:#dfebfd;}
#right{width:180px;padding:0 10px;margin-right:-240px;}
当 container overflow:hidden 被删除时，内容也会显示出来，但页面的全长为 10000px!
我还尝试按照 CSS 3 Column Liquid Layout Dynamic Same Height Column 中的建议制作 container display:table 和列 display:table-cell但是这些列的高度不相等!
有人可以指导哪些参数可以修改。
最佳答案
此行为似乎是此解决方案的默认行为。请参阅:http://jsfiddle.net/qm3z9p2q/这是来自 alistapart 的解决方案，使用 padding-bottom、margin-bottom 解决方案使列的高度相等。
使用 display:table 和 display:table-cell 是完全不同的解决方案。请参阅:http://jsfiddle.net/qm3z9p2q/1/
还有第三种解决方案，它使用边框颜色作为左右两列的背景颜色。请参阅:http://jsfiddle.net/qm3z9p2q/3/这仅在中心列曾经是最高列的情况下才有效。并且在列之后需要一个清除元素，请参阅 HTML。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Faux columns with border-color</title>
<style type="text/css">
/*** The Essential Code ***/
body {
min-width: 550px; /* 2 x LC width + RC width */
}
#container {
border-left: 200px solid #66F; /* LC width */
border-right: 150px solid #F66; /* RC width */
}
#container .column {
position: relative;
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
right: 200px; /* LC width */
margin-left: -100%;
}
#right {
width: 150px; /* RC width */
margin-right: -100%;
}
#footer {
clear: both;
}
/*** IE6 Fix ***/
* html #left {
left: 150px; /* RC width */
}
/*** Just for Looks ***/
body {
margin: 0;
padding: 0;
background: #FFF;
}
#header, #footer {
font-size: large;
text-align: center;
padding: 0.3em 0;
background: #999;
}
#left {
}
#center {
background: #DDD;
}
#right {
}
#container .column {
padding-top: 1em;
text-align: justify;
}
p#i12345 {
margin-top:50em;
}
</style>
</head>
<body>
<div id="header">This is the header.</div>
<div id="container">
<div id="center" class="column">
<h1>This is the main content.</h1>
<p><a href="#i12345">jump to ID i12345</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
<p id="i12345">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
<div id="left" class="column">
<h2>This is the left sidebar.</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
<div id="right" class="column">
<h2>This is the right sidebar.</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
</div>
<div style="clear:both;"></div>
</div>
<div id="footer">This is the footer.</div>
</body>
</html>
问候
阿克塞尔
关于html - 内容在 url 中使用哈希推送到视口(viewport)上方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25702715/
25
4
0
我正在尝试 grep conf 文件中所有不以 开头的有效行 哈希(或) 任意数量的空格(0 个或多个)和一个散列 下面的正则表达式似乎不起作用。 grep ^[^[[:blank:]]*#] /op
我正在使用哈希通过 URL 发送 protected 电子邮件以激活帐户 Hash::make($data["email"]); 但是哈希结果是 %242y%2410%24xaiB/eO6knk8sL
我是 Perl 的新手，正在尝试从文本文件创建散列。我有一个代码外部的文本文件，旨在供其他人编辑。前提是他们应该熟悉 Perl 并且知道在哪里编辑。文本文件本质上包含几个散列的散列，具有正确的语法、缩
我一直在阅读 perl 文档，但我不太了解哈希。我正在尝试查找哈希键是否存在，如果存在，则比较其值。让我感到困惑的是，我的搜索结果表明您可以通过 if (exists $files{$key}) 找到
我遇到了数字对映射到其他数字对的问题。例如，(1,2)->(12,97)。有些对可能映射到多个其他对，所以我真正需要的是将一对映射到列表列表的能力，例如 (1,2)->((12,97),(4,1))。
我见过的所有 Mustache 文档和示例都展示了如何使用散列来填充模板。我有兴趣去另一个方向。 EG，如果我有这个: Hello {{name}} mustache 能否生成这个(伪代码): tag
我正在尝试使用此公式创建密码摘要以获取以下变量，但我的代码不匹配。不确定我做错了什么，但当我需要帮助时我会承认。希望有人在那里可以提供帮助。 文档中的公式:Base64(SHA1(NONCE + TI
我希望遍历我传递给定路径的这些数据结构(基本上是目录结构)。 目标是列出根/基本路径，然后列出所有子 path s 如果它们存在并且对于每个子 path存在，列出 file从那个子路径。 我知道这可能
我希望有一个包含对子函数的引用的散列，我可以在其中根据用户定义的变量调用这些函数，我将尝试给出我正在尝试做的事情的简化示例。 my %colors = ( vim => setup_vim()
我注意到，在使用 vim 将它们复制粘贴到文件中后尝试生成一些散列时，散列不是它应该的样子。打开和写出文件时相同。与 nano 的行为相同，所以一定有我遗漏的地方。 $ echo -n "foo"
数组和散列作为状态变量存在限制。从 Perl 5.10 开始，我们无法在列表上下文中初始化它们: 所以 state @array = qw(a b c); #Error! 为什么会这样？为什么这是不允
在端口 80 上使用 varnish 5.1 的多网站设置中，我不想缓存所有域。 这在 vcl_recv 中很容易完成。 if ( req.http.Host == "cache.this.domai
基本上，缓存破坏文件上的哈希不会更新。 class S3PipelineStorage(PipelineMixin, CachedFilesMixin, S3BotoStorage): pa
eclipse dart插件在“变量” View 中显示如下内容: 在“值”列中可见的“id”是什么意思？ “id”是唯一的吗？在调试期间，如何确定两个实例是否相同？我是否需要在所有类中重写toStr
如何将Powershell中的命令行参数读入数组？就像是 myprogram -file file1 -file file2 -file file3 然后我有一个数组 [file1,file2,fil
我正尝试在 coldfusion 中为我们的安全支付网关创建哈希密码以接受交易。 很遗憾，支付网关拒绝接受我生成的哈希值。 表单发送交易的所有元素，并发送基于五个不同字段生成的哈希值。 在 PHP 中
例如，我有一个包含 5 个元素的哈希: my_hash = {a: 'qwe', b: 'zcx', c: 'dss', d: 'ccc', e: 'www' } 我的目标是每次循环哈希时都返回，但没
我在这里看到了令人作呕的类似问题，但没有一个能具体回答我自己的问题。 我正在尝试以编程方式创建哈希的哈希。我的问题代码如下: my %this_hash = (); if ($user_hash{$u
我正尝试在 coldfusion 中为我们的安全支付网关创建哈希密码以接受交易。 很遗憾，支付网关拒绝接受我生成的哈希值。 表单发送交易的所有元素，并发送基于五个不同字段生成的哈希值。 在 PHP 中
这个问题已经有答案了: Java - how to convert letters in a string to a number? (9 个回答) 已关闭 7 年前。 我需要一种简短的方法将字符串转
我是一名优秀的程序员,十分优秀！