邊欄顯示在tumblr主題的div外部

-1

我剛完成編碼主題和所有內容，只要編碼和總體外觀很好，除了一件事情。所以，當我轉到收件箱頁面或任何頁面的內容比整個側邊欄高度更短時，我的側邊欄div似乎超出了我的容器div。這裏有一個例子 image。這裏是編碼結構的CSS & HTML。邊欄顯示在tumblr主題的div外部

.sidebar { 
    width:310px; 
    margin-top:30px; 
    margin-left: 590px; 
    position: absolute; 

.wrap { 
    width: 920px; 
    margin: 0 auto; 
    background:{color:content background}; 
    padding: 20px 20px 0px 20px; 
    margin-top: -5px; 
    position: relative; 

} 

.content { 
    margin-top:30px; 
    width: 500px; 
    margin-left:20px; 

} 

<div class="wrap"> <!--CONTAINER--> 

<div class="topbar"> <!--TOP LINKS--> 
<div id="title">{title}</div> 
<div class="links"> 
    <a href="/">Home</a> 
    <a href="/ask">Inbox</a> 
    <a href="/archive">Archive</a> 
    <a href="{text:link 1 url}">{text:link 1 title}</a> 
    <a href="{text:link 2 url}">{text:link 2 title}</a> 

    <!--DO NOT REMOVE CREDIT!!!--> 
    <a href="http://ixaathemes.tumblr.com/">Theme</a> 
    <!--DO NOT REMOVE CREDIT!!!--> 

</div> <!--TOP LINKS--> 


</div> 

<div class="header"> 
<img src="{image:header}"> 
</div> 

<div class="sidebar"> <!--SIDEBAR CONTENT. THIS IS WHERE THE SIDEBOXES ARE WHERE YOU CAN MANUALLY ADD THE CONTENTS--> 



    <!-- DESCRIPTION BOX --> 

<div class="cat"> 
    <div class="cti"><i class="fa fa-user" aria-hidden="true" style="padding-right:10px; color:{color:titles};"></i>Welcome</div> 
<div class="sideimg"><img src="{image:sidebar}"></div> 
    <div class="description">{Description}</div> 
</div> 

    <!-- NAVIGATION LINKS --> 
{block:ifextralinks} 
<div class="cat"> 
    <div class="cti"><i class="fa fa-list" aria-hidden="true" style="padding-right:10px; color:{color:titles};"></i>Navigation Links</div> 
<div class="morelinks"> 
    {block:ifCustomLink1}<a href="{text:CustomLink1URL}">{text:CustomLink1Name}</a>{/block:ifCustomLink1} 
    {block:ifCustomLink2}<a href="{text:CustomLink2URL}">{text:CustomLink2Name}</a>{/block:ifCustomLink2} 
    {block:ifCustomLink3}<a href="{text:CustomLink3URL}">{text:CustomLink3Name}</a>{/block:ifCustomLink3} 
    {block:ifCustomLink4}<a href="{text:CustomLink4URL}">{text:CustomLink4Name}</a>{/block:ifCustomLink4} 
    {block:ifCustomLink5}<a href="{text:CustomLink5URL}">{text:CustomLink5Name}</a>{/block:ifCustomLink5} 
    {block:ifCustomLink6}<a href="{text:CustomLink6URL}">{text:CustomLink6Name}</a>{/block:ifCustomLink6} 
</div> 
</div> 
{/block:ifextralinks} 

    <!-- UPCOMING EVENTS --> 
{block:ifevents} 
<div class="cat"> 
    <div class="cti"><i class="fa fa-calendar" aria-hidden="true" style="padding-right:10px; color:{color:titles};"></i>Upcoming events</div> 

    <div class="events"> 

<!-- THIS IS WHERE YOU WILL ADD YOUR UPCOMING EVENTS IF YOU PLEASE. if you would like to add more just copy the code below: 

<tr> 
<td> 
<div class="date">Event date here</div> 
</td> 
<td> 
<div class="e">Event info here</div> 
</td> 
</tr> 

make sure to past it right about the 'event end' 
--> 

<table style="width:100%"> 

<!-- events box start --> 

<tr> 
<td> 
<div class="date">November 12</div> 
</td> 
<td> 
<div class="e">Event: One</div> 
</td> 
</tr> 

<tr> 
<td> 
<div class="date">November 13</div> 
</td> 
<td> 
<div class="e">Event: two</div> 
</td> 
</tr> 

<tr> 
<td> 
<div class="date">November 14</div> 
</td> 
<td> 
<div class="e">Event: three</div> 
</td> 
</tr> 

<tr> 
<td> 
<div class="date">November 14</div> 
</td> 
<td> 
<div class="e">Event: four</div> 
</td> 
</tr> 

<!-- events box start --> 
</table> 
</div></div> 
{/block:ifevents} 

    <!-- PROJECTS --> 
{block:ifprojects} 
<div class="cat"> 
    <div class="cti"><i class="fa fa-book" aria-hidden="true" style="padding-right:10px; color:{color:titles};"></i>Projects</div> 

    <div class="projects"> 

    <!-- THIS IS WHERE YOU WILL ADD THE PROJECTS THAT CORRESPOND WITH THE THEME OF YOUR FANSITE BLOG. iF YOU WOULD LIKETO ADD MORE JUST COPY THE CODE BELOW: 

    <tr> 
<td style="width:30px">   
      <img src="IMAGE URL"> 
</td> 
<td> 
       <div class="pinfo"> 
       <b>Title:</b><br> 
       <l1> 
       <b>Info</b>: Info<br> 
       <b>Info</b>: Info<br> 
       <b>Info</b>: Info</div> 
       </l1> 
</td> 
</tr> 

MAKE SURE TO PASTE IT RIGHT ABOVE THE 'PROJECTS END' 
    --> 

<table style="margin-top:0px; width:100%"> 

    <!-- PROJECTS START--> 

<tr> 
<td style="width:30px">   
      <img src="http://static.tumblr.com/pbhn8p5/BPwo9x2yv/ject-5.png"> 
</td> 
<td> 
       <div class="pinfo"> 
       <b>Title:</b><br> 
       <l1> 
       <b>Info</b>: Info<br> 
       <b>Info</b>: Info<br> 
       <b>Info</b>: Info</div> 
       </l1> 
</td> 
</tr>    

<tr> 
<td style="width:30px">     
       <img src="http://static.tumblr.com/pbhn8p5/AoQo9x30n/ject-6.png"> 
</td> 
<td> 
       <div class="pinfo"> 
       <b>Title:</b><br> 
       <l1> 
       <b>Info</b>: Info<br> 
       <b>Info</b>: Info<br> 
       <b>Info</b>: Info</div> 
       </l1> 
</td> 
</tr> 

<tr> 
<td style="width:30px">     
          <img src="http://static.tumblr.com/pbhn8p5/t5so9x315/ject-7.png"> 
</td> 
<td> 
       <div class="pinfo"> 
       <b>Title:</b><br> 
       <l1> 
       <b>Info</b>: Info<br> 
       <b>Info</b>: Info<br> 
       <b>Info</b>: Info</div> 
       </l1> 
</td> 
</tr> 

    <!-- PROGECTS END--> 
</table>    

       </div></div> 
{/block:ifprojects} 

    <!-- MEMBERS --> 
{block:ifmembers} 
<div class="cat"> 
    <div class="cti"><i class="fa fa-users" aria-hidden="true" style="padding-right:10px; color:{color:titles};"></i>Members</div> 

    <!-- THIS IS BASICALLY SET UP FOR A GROUP BLOG SCENARIO. BASICALLY THE BLOGGER (YOU) GIVE PERMISSION FOR OTHER PEOPLE TO HAVE ACCESS TO THIS BLOG. FOR MORE INFORMATION ON HOW TO SET THIS UP CHECK OUT THIS WEBSITE BELOW 

    http://smallbusiness.chron.com/set-up-admins-tumblr-34947.html 

    SO TO PUT IT SIMPLY YOU DON'T EDIT THIS BOX LIKE YOU WOULD THE OTHERS UNLESS YOU KNOW WHAT YOU'RE DOING. 
    --> 


    {block:GroupMembers} 
<table style="margin-top:0px; padding: 10px;"> 
{block:GroupMember} 
<tr> 
<td style="width:40px;"> 
<img src="{GroupMemberPortraitURL-40}" width="40px;" height="40px;" style="margin-right: 10px; padding:5px;"> 
</td> 
<td style="width:290px; height:auto;"> 
<div id="m" style="margin-bottom:10px;"> 
<a href="{GroupMemberURL}" style="color:{color:desc link};">{GroupMemberName}</a><br>{GroupMemberTitle}</div> 

</tr> 
{/block:GroupMember} 
</table> 
{/block:GroupMembers} 
</div> 
{/block:ifmembers} 

    <!-- UPDATES BOX --> 
{block:ifupdates} 
<div class="cat"> 
    <div class="cti"><i class="fa fa-pencil" aria-hidden="true" style="padding-right:10px; color:{color:titles};"></i>Updates</div> 

    <div class="up"> 

<!-- THIS IS THE UPDATES TAP WHERE YOU CAN PLACE ALL OF YOUR RECORDS OF YOUR RECENT BLOG-RELATED UPDATES. IF YOU WOULD LIKE TO ADD MORE UPDATES THEN YOU CAN JUST COPY THE CODE BELOW: 

<tr> 
<td><div class="update">date</div></td> 
<td><div class="upinfo">update</div></td> 
</tr> 

MAKE SURE TO PASTE THE CODE RIGHT ABOUT THE 'UPDATES END' 

--> 

<table style="width:100%"> 

    <!-- UPDATES START --> 

<tr> 
<td><div class="update">11.12:</div></td> 
<td><div class="upinfo">update one</div></td> 
</tr> 

<tr> 
<td><div class="update">11.13:</div></td> 
<td><div class="upinfo">update one</div></td> 
</tr> 

<tr> 
<td><div class="update">11.14:</div></td> 
<td><div class="upinfo">update one</div></td> 
</tr> 

<tr> 
<td><div class="update">11.15:</div></td> 
<td><div class="upinfo">update one</div></td> 
</tr> 

    <!-- UPDATES END --> 
</table> 
</div>   
</div> 
{/block:ifupdates} 

    <!-- AFFILIATES --> 
{block:ifaffiliates} 
<div class="cat"> 
    <div class="cti"><i class="fa fa-laptop" aria-hidden="true" style="padding-right:10px; color:{color:titles};"></i>Affiliates</div> 

    <div class="affiliates"> 

<!-- THIS IS WHERE YOU CAN ADD THE IMAGES OF THE SISTER BLOG IN WHICH YOUR FANSITE IS AFFILIATED WITH. IF YOU WOULD LIKE TO ADD MORE PICTURES THEN JUST CODY THE CODE BELOW 

     <a href="/" title="visit blog"><img src="IMAGE URL"/></a> 

MAKE SURE TO PASTE THE CODE RIGHT ABOVE THE 'AFFILIATES END' 
--> 

<!-- AFFILIATES START--> 

     <a href="/" title="apply"><img src="http://static.tumblr.com/7r3q3uq/MmIo6iq7n/ject-1.png"/></a> 
     <a href="/" title="apply"><img src="http://static.tumblr.com/7r3q3uq/lado6ipym/ject-2.png"/></a> 
     <a href="/" title="apply"><img src="http://static.tumblr.com/7r3q3uq/QrJo6ipyy/ject-3.png"/></a> 
     <a href="/" title="apply"><img src="http://static.tumblr.com/7r3q3uq/L0Mo6ipz9/ject-4.png"/></a> 

<!-- AFFILIATES END-->  
    </div> 
</div> 
{/block:ifaffiliates} 

    <!-- OFFICIAL LINKS --> 
{block:ifofficiallinks}  
<div class="cat"> 
    <div class="cti"><i class="fa fa-globe" aria-hidden="true" style="padding-right:10px; color:{color:titles};"></i>Official Links</div> 
    <div class="off"> 

<!-- THEM OFFICIAL LINKS WHICH ARE ALREADY SET UP FOR YOU IN THE EDIT THEME SECTION DO NOT CHANGE ANYTHING BELOW. --> 

     <a href="{text:official link 1 url}">{text:official link 1 title} <i class="fa fa-twitter" style="float:right; color:{color:navi};"></i></a> 
     <a href="{text:official link 2 url}">{text:official link 2 title} <i class="fa fa-instagram" style="float:right; color:{color:navi};"></i></a> 
     <a href="{text:official link 3 url}">{text:official link 3 title} <i class="fa fa-facebook" style="float:right; color:{color:navi};"></i></a> 
     <a href="{text:official link 4 url}">{text:official link 4 title} <i class="fa fa-snapchat-ghost" aria-hidden="true" style="float:right; color:{color:navi};"></i></a> 
     <a href="{text:official link 5 url}">{text:official link 5 title} <i class="fa fa-youtube-play" style="float:right; color:{color:navi};"></i></a> 
    </div> 
</div> 
{/block:ifofficiallinks}  

<!-- BLOG INFO --> 
{block:ifbloginfo} 
<div class="cat"> 
    <div class="cti"><i class="fa fa-check" aria-hidden="true" style="padding-right:10px; color:{color:titles};"></i>About this blog</div> 
    <div class="binfo"> 

<!-- GENER BLOG INFO LIKE WHEN WAS IT ESTABLISHED. YOUR FREE HOSTED SCRIPTS (ONLINE USERS, BLOG VISITS, FOLLOWERS/ETC. --> 

    <b>About:</b> A fansite theme for fandom challenges, character, shipss, whatever floats your boat <br> 
     <b>Admins:</b> 1 <br> 
     <b>Designed by:</b> <a href="http://ixathemes.tumblr.com">ixathemes</a> @ tumblr<br> 
     <b>Online:</b> <script language="JavaScript"> 
var ref = (''+document.referrer+''); 
var w_h = window.screen.width + " x " + window.screen.height; 
document.write('<script src="http://s1.freehostedscripts.net/ocounter.php?site=ID4973001&e1=ghoul &e2=ghouls &r=' + ref + '&wh=' + w_h + '"><\/script>'); 
</script> <br> 
     <b>Visits:</b> <script language="JavaScript" src="http://s1.freehostedscripts.net/ocount.php?site=ID2955028&name=investigators"></script><br><br> 

      This site claims no credit for any images posted unless it's been stated otherwise. Images and information posted on this blog are copyrighted to their respective owners. 
     </div> 
</div> 
{/block:ifbloginfo} 

    <!-- Search Bar --> 
{block:ifsearch} 
<div class="cat"> 
    <div class="cti"><i class="fa fa-search" aria-hidden="true" style="padding-right:10px; color:{color:titles};"></i>search</div> 

    <div class="bsearch"> 

<!-- THIS IS SEARCHBAR CODE. DO NOT TOUCH PLEASE. --> 

<script language="javascript"> 
function send() 
{document.theform.submit()} 
</script>    
<form action="/search" method="get" class="sfm"> 
    <input type="text" name="q" value="search" id="sf"/> 
    <input type="image" value="Search" src="http://static.tumblr.com/f1skqpy/Oxbn13qun/search_icon.png" id="sb"/> 
</form> 

<!-- THIS IS SEARCHBAR CODE. DO NOT TOUCH PLEASE. --> 
    </div> 
</div> 
{/block:ifsearch} 
<!-- Search Bar --> 

</div> <!--SIDEBAR--> 

<div class="content"> <!--CONTENT--> 
{block:Posts} 
<div class="posts"> <!--POSTS--> 

{block:ContentSource} 
<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" 
width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" /> 
{/block:SourceLogo} 
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} --> 
{/block:ContentSource} 

<!-- {block:NoRebloggedFrom} 
{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom} 
{/block:NoRebloggedFrom} --> 

{block:Text} 
{block:Title}<div class="title">{Title}</div>{/block:Title} 
<div class="text">{Body}</div> 
{/block:Text} 


{block:Photo} 
{LinkOpenTag}<img src="{PhotoURL-500}" width="500">{LinkCloseTag} 
{/block:Photo} 


{block:Photoset} 
{Photoset-500} 
{/block:Photoset} 

{block:Quote} 
<center> 
<div class="quote-box">"</div> 
</center> 
<div class="qtline"></div> 
<div class="quote">{Quote}</div> 
{block:Source}<div class="qtsource"><br><center>- {Source} -</center></div>{/block:Source} 
{/block:Quote} 

{block:Link} 
<div class="link"><a href="{URL}">{Name} »</a></div> 
{block:Description} 
<div class="text">{Description}</div> 
{/block:Description} 
{/block:Link} 


{block:Chat} 
{block:Title}<h1>{Title}</h1>{/block:Title} <div class="chat"> {block:Lines} <li class="line {Alt}"> {block:Label} <span class="label"> {Label}</span> {/block:Label}{Line}</li> {/block:Lines}</div> 
{/block:Chat} 


{block:Audio} 
<div class="playbox"><div class="playbutton">{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}</div></div> 

{block:AlbumArt} 
<img src="{AlbumArtURL}" class="cover"> 
{/block:AlbumArt} 

<div class="trackdetails"><br> 
{block:TrackName}<b>Track:</b> {TrackName}{/block:TrackName}<br> 
{block:Artist}<b>Artist:</b> {Artist}{/block:Artist}<br> 
{block:Album}<b>Album:</b> {Album}{/block:Album}<br> 
{block:PlayCount}<b>Played:</b> {PlayCountWithLabel}{/block:PlayCount} 
</div> 
{/block:Audio} 


{block:Video} 
{Video-500} 
{/block:Video} 


{block:Answer} 
<div id="asker"><b>{Asker} asked:</b></div> 
<img src="{AskerPortraitURL-64}"align="left" style="border:5px solid {color:asker portrait border}"> 
<div class="question"> 
{Question}&nbsp;</div> 
<div class="answer">{Answer}</div> 
{/block:Answer} 

{block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions} 
{block:IfnotShowCaptions} 
{block:PermalinkPage}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:PermalinkPage}{/block:IfnotShowCaptions} 

{block:IndexPage} 
<div class="info"> <!--Permalink and Notes--> 
Posted 
{block:Date} 
<a href="{Permalink}" title="{TimeAgo}">{Month} {DayOfMonth}{DayOfMonthSuffix}</a> 
{/block:Date} 
{block:NoteCount} with <a href="{Permalink}" title="go to permalink page">{NoteCountWithLabel}</a>{/block:NoteCount} 

<font style="float:right"> 
{block:RebloggedFrom} 
<a href="{ReblogParentURL}" title="{ReblogParentName}">via </a> 
{block:ContentSource} 
<a href="{ReblogRootURL}" "{ReblogRootName}" title="{ReblogRootName}">| src</a> 
{/block:ContentSource} 
| 
{/block:RebloggedFrom} 
<a href="{ReblogURL}" title="Reblog this post"> reblog</a> 
</font style> 
</div> <!--Permalink and Notes--> 

<!--TAGS--> 
{block:ifShowTags} 
{block:HasTags}<div id="tag">{block:Tags}<a href="{TagURL}" title="Tagged as">#{tag}</a> {/block:Tags}</div>{/block:HasTags}{/block:ifShowTags} 
{block:permalinkpage}{block:ifnotShowTags}{block:HasTags}<div id="tag"> {block:Tags}<a href="{TagURL}" title="Tagged as">#{Tag}</a>{/block:Tags}</div>{/block:HasTags}{/block:ifnotShowTags}{/block:permalinkpage} 
<!--TAGS--> 

{/block:IndexPage} 
</div> <!--CONTENT--> 

{block:PermalinkPage} <!--PERMALINK PAGE--> 
<div id="perma"> 
{block:Date}Posted {ShortMonth} {DayOfMonthWithZero}, {Year} @ {12Hour} {AmPm}{/block:Date} 
{block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}{block:RebloggedFrom} 
<br> 
<a href="{ReblogParentURL}">via: {ReblogParentName}</a> + 
<a href="{ReblogRootURL}">source: {ReblogRootName}</a> 
{/block:RebloggedFrom} 
<br> 
{block:HasTags}{block:Tags}<a href="{TagURL}" title="Tagged as">#{Tag}</a> {/block:Tags}{/block:HasTags} 
</div> 

{block:PostNotes} 
{PostNotes} 
{/block:PostNotes} 
{/block:PermalinkPage} 
{/block:Posts} <!--PERMALINK PAGE--> 

<div id="foot"> <!--PAGINATION BAR--> 
<!--pagination--> 
    {block:IfNotInfiniteScroll} 
    {block:Pagination} 
      <div id="pagination"> 
       {block:PreviousPage}<a href="{PreviousPage}">«</a>{/block:PreviousPage} 
       {block:JumpPagination length="5"} 
       {block:CurrentPage}<span class="current_page">X</span>{/block:CurrentPage} 
       {block:JumpPage}<a href="{URL}">{PageNumber}</a> {/block:JumpPage} 
       {/block:JumpPagination} 
       {block:NextPage}<a href="{NextPage}">»</a>{/block:NextPage} 
      </div> 
     {/block:Pagination} 
{/block:IfNotInfiniteScroll} 
<!--pagination--> 
</div> <!--PAGINATION BAR--> 
</div> <!--CONTAINER-->

所以我想知道有沒有辦法對我來說，解決這個問題，因爲我是一個主題壺和我的人來到我的收件箱關於這個問題，我討厭說我沒有迴應的想法，這可能導致他們放棄主題，因爲我不知道如何解決設計缺陷。非常感謝:)

以下是密碼pastebin code。

來源

2016-07-30 shuntuationatseirin

瀏覽器計算所述容器的高度應該是什麼時，不會考慮到絕對定位的側欄。因此，當沒有主要內容或主要內容的高度不足側欄時，容器太短。

爲了克服這一點，你可以設置一個最小高度爲您的容器元素等於與jQuery的側邊欄的高度，比如：

$(document).ready(function(){ 
$(".wrap").css("min-height", function(){ 
return $(".sidebar").innerHeight()+30; 
});});

如果你的側邊欄包含了我會建議使用imagesLoaded結合圖片這樣腳本就會佔用圖像的高度，而不是在加載時將它們設置爲0。我們在側邊欄的計算高度上添加30來計算上邊距。

來源

2016-09-30 18:05:19 Lio

非常感謝你，過了一段時間我真的找到了解決這個問題的方法，所以我想感謝所有幫助過我的人。我非常感謝時間和精力:) – shuntuationatseirin

設置體和HTML的高度和寬度爲100％

來源

2016-08-02 21:12:47 user1377298

非常感謝你的建議。我試過了，不幸的是它沒有工作。 – shuntuationatseirin

邊欄顯示在tumblr主題的div外部

回答

相關問題