首页 文章

扩展滚动框以及背景[重复]

提问于
浏览 次
0

这个问题在这里已有答案：

这是我的Site
在底部，有公告框
我们将每周发布公告 .
问题是，当内容扩展时（点击它），
公告部分下方的内容落后于 DIV 背景 .
我试图增加 Social 小部件的 background ，
但似乎无用，因为如果我关闭展开按钮，> br>它留下太多空间 .
如果单击展开按钮，我该如何制作？
社交小部件的 DIV 背景也在扩展 .
试着
添加 background-size:100% 100%
background-size:content

.socialcontainer {
    background: white;
    margin-top: 19px;
    /*height: 750px;*/
    height: 916px;
    max-width: 100%;
    max-height: 100%;
}
	@media only screen and (max-width: 736px) {
	.socialcontainer {
		height: 985px;
		
			}

	}
  #news_area {
    margin-left: 152px;
    width: 88%;
    margin-top: 34px;
    background: #dddddd;
}
.facebook_page {
	float: right;
	
	margin-right: 161px;
	border : 2px solid grey;
	
}
.iframe#twitter-widget-0 {
	margin-left: 212px;
}
.sociallogo {
	padding: 243px 283px 23px 273px;
	
}

.fblogo {
	
	margin-left: 27px;
}


.twitterlogo {
	margin-left: 485px;
	margin-top: -44px;
}

<div class="socialcontainer">
<div class="col-sm-10 news_contents">
    <div id="news_area">
        <h2 class="heading01">新着情報</h2>
        <div class="accordion">
            <div class="newslist">

                                <dl>
                    <dt>
                        <span class="date">2018/12/10</span>
                        <span class="news_title">
                            年末年始の営業について
                        </span>
                                                <span class="angle-circle"><svg class="cb cb-angle-down"><use xlink:href="#cb-angle-down" /></svg></span>
                                            </dt>
                                        <dd>平素より AZ Lily(アズリリー)をご利用いただきまして、

誠にありがとうございます。



年末年始の商品発送について下記の通りお知らせいたします。

ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ

【休業期間】

<strong>2018年12月28日(金) ～ 2019年1月3日(木)</strong>



年内の最終出荷は

<strong>2018年12月26日(水)14時までのご注文分</strong>

とさせていただきます。



※2018年12月28日(金) 以降にいただいた

ご注文・お問合せにつきましては

年始の営業開始時間より、順次対応して参ります。

何卒ご了承くださいますようお願い申し上げます。

ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ
                                            </dd>
                                    </dl>
                                <dl>
                    <dt>
                        <span class="date">2018/11/30</span>
                        <span class="news_title">
                            サイトをリニューアルOPENしました
                        </span>
                                                <span class="angle-circle"><svg class="cb cb-angle-down"><use xlink:href="#cb-angle-down" /></svg></span>
                                            </dt>
                                        <dd>日頃よりAZ Lily をご愛顧いただきありがとうございます。



このたび、サイトを全面リニューアルいたしました。

今回のリニューアルでは、より快適にお買い物していただけるサイトとなるように

デザインや構成を改善させていただきました。



これまで以上に、みなさまに使いやすいサイトを目指し、内容を充実して参りますので

今後とも何卒よろしくお願い申し上げます。



AZ Lily スタッフ一同
                                            </dd>
                                    </dl>
                
            </div>
        </div>
    </div>
</div>

<div class="sociallogo">
<div class="fblogo"><img height="45" width="45" src = "/html/template/default/img/socialimage/twitter_banner.png"></div>
<div class="twitterlogo"><img height="45" width="45" src = "/html/template/default/img/socialimage/fb_banner.png"></div>
</div>

<div class="social_page">

<div class="twitter_page" style="">
              
                <a class="twitter-timeline" data-width="350" data-height="400" href="https://twitter.com/AZLily_official?ref_src=twsrc%5Etfw">Tweets by AZLily_official</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

<div class="facebook_page" style="">
                        
                     <iframe src="https://www.facebook.com/plugins/page.php? 
                    href=https%3A%2F%2Fwww.facebook.com%2FAZLily.yuri&tabs=timeline&width=350&height=400&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="350" 
                    height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
  </div>



  </div>
</div>
                <!-- ▲新着情報 -->

                                    </div>
                        
        </div>
html css

3 回答

  • 1

    你必须添加这个只是使用这些属性，看看会发生什么 . 如果我可以帮助你做任何其他事情，请告诉我 . `

    .socialcontainer::after {
content: '';
position: relative;
display: block;
clear: both;
}

    这个 .socialcontainer {height:auto}

    回复于
  • 0

    尝试在社交模块容器上设置'min-height'，并且'overflow：hidden'

    回复于
  • 1

    我注意到你的元素 div 与类 .social_page 在childs元素上有0个高度，'cause of the ' float'属性，为此你的元素 .socialcontainer 无法填充你想要的背景 .

    我已经改变了你的类来实现你的结果：

    .socialcontainer {
     background: white;
     margin-top: 19px;
     height: 100%;
     /*height: 956px; removed */
     max-width: 100%;
     max-height: 100%;
}
.social_page {
     display: flex;
}
.twitter_page {
    /*float: left; removed */
}
.facebook_page {
    /*float: right; removed */
}

    我删除了 float 属性，因为如果不是 .social_page 将无法占据全高，因为带有浮点数的元素被认为是'removed from the normal flow of the page'，对于进一步的规范，你可以看看here .

    我已将值 100% 放在元素 .socialcontainer 中的 height 属性上，因为现在您的元素不是'out of normal flow'且 .socialcontainer 能够填充高度 .

    对于某些美学，我还在 .social_page 上为你的元素添加了 display: flex; .

    如果您需要进一步解释，请与我们联系 .

    回复于

相关问题