我有文章详细信息页面,在其中显示文章详细信息,例如文章图像,日期和文章文本。在文章的左侧,我放了一条垂直的蓝线,它等于文章主体的高度,因为我不确定文章的高度,因此我使用javascript来获取文章文本容器的高度并分配相同的高度到垂直的蓝色条(div id ='ArticleBlueSide'),其宽度为3个像素。

它工作正常,没有URL路由也显示了蓝线,但是当我添加URL路由时,蓝线没有显示。

以下是脚本块和我的HTML div包含的内容。

我正在使用c#使用ASP.Net 4.0 Web表单。

如果有人可以帮助我解决此设计问题,我将不胜感激。

$(document).ready(function () {
    var h = document.getElementById("ArticleTextArea").offsetHeight;
    h = h - 25;
    document.getElementById("ArticleBlueSide").style.height = h + "px";
});


<div id="ArticleContainer">
     <div id="ArticleBlueSide"></div>
     <div id="ArticleTextArea">
          <asp:Label ID="lblArticleDetails" CssClass="PageBodyText" runat="server"  meta:resourcekey="lblArticleDetailsResource1"></asp:Label>
     </div>
</div>


页面插图示例


在实现由riffnl建议的解决方案之后(这有其自身的问题,因为蓝线比文本长,并且由于段落周围有填充,所以我无法修复它。我的第一个解决方案运行良好,但在URL路由后无法正常工作

最佳答案

@riffnl的解决方案是解决之道-像这样解决填充问题:
http://jsfiddle.net/Wf6tA/

请注意,您可以单击一个段落以标记或取消标记它。

08-19 03:56