我有网页
www.turie.eu
底部有一些facebook评论。我必须更改什么才能动态更改高度并显示所有 16 条评论？
我试图将与注释部分有关的每个 CSS 选择器的高度从单个值更改为 100% 或自动，但没有任何效果。
谢谢！
问问题
334 次
3 回答
3
这是因为：
#contenwrap {overflow: hidden}
删除此规则后，您将解决一些其他设计问题，但您走在正确的道路上 :-)
更新！
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #FFF url(pozadie04.jpg) no-repeat scroll center top;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ this fixed width container surrounds all other elements ~~ */
.container {
width: 960px;
margin: 280px auto 0; /* the auto value on the sides, coupled with the width, centers the layout */
box-shadow: 0 0 40px black; /* Not supported in IE7 and IE8 */
}
.header {
width:960px;
height:280px;
position:absolute;
top:0;
}
.headerPic {position:absolute;}
.Logo {bottom: 35px; left:98px}
.Church {bottom: 0; right:70px}
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
*/
.content {
padding: 10px 0;
background:rgba(255,255,255,0.9); /* Not supported in IE7 and IE8 */
border:1px solid #fff;
}
.forum {
height:130px;
}
.maps {
height:523px;
}
.fb {
width:600px;
background: #FFF url(facebookcomments_nadpis.png) no-repeat left top;
padding-top: 70px;
margin-left:15px;
}
.mb {
width:300px;
background: url(mikroblog-nadpis.png) no-repeat left top;
padding-top: 70px;
margin-right:15px;
}
.footer {
width:960px;
height:237px;
background: url(footer.png) no-repeat bottom;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style></head>
<body>
<div class="container">
<div class="header">
<img class="headerPic Logo" src="maco07.png" width="277" height="185" alt="Logo">
<img class="headerPic Church" src="kostol03.png" width="170" height="230" alt="church">
<!-- end .header --></div>
<div class="content">
<div class="forum">
<p>Place your forum in this DIV</p>
<!-- end .forum --></div>
<div class="maps">
<p>Place your Google Map in this DIV</p>
<!-- end .maps --></div>
<div class="hero">
<h1>Vitajte!</h1>
<p>Turie.eu je komunitný web s cieľom prezentovať obec Turie formou interaktívnych panoramatických fotografií. Vzhľadom na všeobecne nízku úroveň interaktivity na stránkach obcí, bude možnosť spoluvytvárať obsah Turie.eu jej návštevníkmi našou prioritou.</p>
<p>Stránka funguje vo všetkých moderných prehliadačoch a v IE8+. Ak nájdete nejaké chyby, máte návrhy na zlepšenie, alebo sa chcete podieľať na vytváraní obsahu, napíšte nám.</p>
<p>Chystané zmeny: užívateľská fotogaléria, kalendár udalostí, filtrovanie markerov, hlasovania, rezervácie..</p>
<!-- end .hero --></div>
<div class="wrap">
<div class="fb fltlft">
<h2>Facebook </h2>
<p>sdlkfjsdf kjsadf slkødfj sødlfkj sadlkfj sad flkj</p>
<p>sdlkfjslkdjflksjdflkjsdf</p>
<p>sdflkjsdlfkjsdlkfj</p>
<p>sldkfjlkdsfj</p>
<p>Float is cleared in this DIV</p>
<!-- end .fb --></div>
<div class="mb fltrt">
<h2>Mikroblog</h2>
<p>sdkfljøslkdfjlkjdsfølkj</p>
<p>sdlkfjølskdjfølksjdf</p>
<p>sdlkfjøsldkfjølskdfj</p>
<p>sdlfkjøsldkfj</p>
<p>sdlkfjøsldkfj</p>
<p>sdflkjsdøflkj</p>
<p>slskdjfølksdjf</p>
<p>Float is cleared in this DIV</p>
<!-- end .mb --></div>
<br class="clearfloat">
<!-- end .wrapper --></div>
<!-- end .content --></div>
<div class="footer">
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
于 2012-09-01T10:30:49.603 回答
3
您可以使用滚动 div，使用css overflow property或overflow:auto用于滚动
于 2012-09-01T11:45:27.223 回答
0
这是针对 rgba 问题的 IE 修复程序。我在他的网站上使用了 Kimili 的生成器（很棒的工具）。
<!--[if IE]>
<style type="text/css">
{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF); /* IE6 & 7 */
zoom: 1;
}
</style>
<![endif]-->
于 2012-09-01T16:48:43.780 回答