1

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

它工作正常，蓝线也出现在没有 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 路由后它不起作用

解决后的例子

4

2 回答 2

0

@riffnl 的解决方案是要走的路 - 像这样解决您的填充问题：http: //jsfiddle.net/Wf6tA/

请注意，您可以单击段落来标记或取消标记它。

于 2012-05-10T10:54:25.943 回答
0

我移动了以下脚本并将其放在解决了我的问题的 div 标签之后。如果我将此脚本保留在 div 标签之前，我不明白为什么它不起作用。

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

我感谢其他人的回复，但这是我想要脚本的行为。

于 2012-05-12T15:27:16.073 回答