私はウェブページを持っています
www.turie.eu
下部にいくつかのFacebookのコメントがあります。高さを動的に変更し、16個のコメントすべてを表示するには、何を変更する必要がありますか？
コメント部分に関係するすべてのcssセレクターの高さを、単一の値から100％またはautoに変更しようとしましたが、効果はありません。
ありがとうございました！
質問する
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 propertyoroverflow: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 に答える