Question

我有一个关于获取绝对定位DIV以根据标题标记中包含的内容调整高度的问题。该设计要求色条在包含区域（最大1170像素）之外扩展，该区域以屏幕为中心。

我已经找到了HTML / CSS，但我认为我需要使用JQuery，因为实现是在WordPress中，因此需要提出一个可以找到任何h2和h3标签的系统指定内容div“.main”中的类“.bar”然后附加适当的DIV标记设置以获得所需的外观。'

问题是浏览器何时调整大小。当标题分为两行时，除了刷新网站外，条形大小不再匹配。我已经尝试了$(window).on('resize', function(){，但它不断添加新的div并且它会变得蠢蠢欲动。

这是一个更简化的设计示例

HTML

<div class="main">
<h2 class="bar">Even the all-powerful Pointing</h2>
<p>Has no control about the blind texts it is an almost unorthographic life One day     however a small line of blind text by the name of Lorem Ipsum     decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.</p>
<h3 class="bar">She packed her seven versalia</h3>
<p>Put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.</p>
</div>

CSS

.gray-bar {
  background: #888f95;
  position: absolute;
  left: 0;
  right: 42.7%;
  height: 5px;
  z-index: -1;
}
.main h2.bar, .main h3.bar {
  background: #888f95;
  color: white;
  padding: .33em 0;
}
.main{
  width: 50%;
  margin: 0 auto;
  background-color: yellow;
}

的jQuery

jQuery(document).ready(function($) {
$( ".main h2.bar" ).wrapAll( "<div class='section-head' />");
$( ".main h3.bar" ).wrapAll( "<div class='section-head' />");
$( ".main" ).find( ".section-head" ).prepend("<div class='gray-bar'></div>");
var heads = 0;
$( "div.section-head" ).each(function() {
    heads++;
    var foo = "foo"+heads;
    $( this ).addClass(foo);
    newHead = "."+foo;
    var z3 = $(newHead).height();
    $(newHead).children(".gray-bar").css("height", z3);
});
});

这是我的Javascript示例的小提琴 http://jsfiddle.net/unwrittendevin/PB48u/

Answer 1

我已经整理了一些＆＃34;概念证据＆＃34; FIDDLE，只要滚动窗口，它就会更新绝对定位的div的大小。大小根据另一个div的高度按比例变化。

您点击任何蓝色框，整个div的高度会发生变化。下次滚动窗口时，固定的div将改变其大小。

这通常是您正在寻找的吗？

JS

$('.variablediv').on('click', function(){
    $('.variablediv').css('height', '70px');
});

$( window ).scroll(function(){
    var heightcontainer = $('.container').height();
    var heightfixeddiv = +heightcontainer;
    $('.absolutediv').css( 'height', heightfixeddiv );
});

根据响应式站点的标题标签高度调整绝对定位div的大小

1 个答案: