2016-03-15 114 views
1

我最近接管了一些来自我之前构建它们的人的hubspot页面。在这个特定的页面上,我有两列 - 一个在左边,一个在右边(有一个灰色的背景)。当前左栏的内容比右栏的内容多,因此右栏的灰色背景不会一直延伸到页面的下方,而是停在其内容的底部。没什么大不了的?我只会使用clearfix ..但是clearfix没有任何作用。好吧,我只会使用JavaScript ...但在尝试使用不同的脚本后,它也无法正常工作。我已经尝试了多个版本的clearfix hack。为什么clearfix无法在此列上工作?

有人可以帮我从右栏中获得这个dang灰色背景,一直延伸到页面的底部(与左栏相同的高度)吗?我会在你的债务!

这里的页面:http://info.brushresearch.com/end-brushes

下面是我用的是最新的CSS代码:

.z-clearfix:after { 
     visibility: hidden; 
     display: block; 
     font-size: 0; 
     content: " "; 
     clear: both; 
     height: 0; 
     } 
    .z-clearfix { display: inline-block; } 
    /* start commented backslash hack \*/ 
    * html .z-clearfix { height: 1%; } 
    .z-clearfix { display: block; } 
    /* close commented backslash hack */ 

下面是我使用的基本HTML ...

<div class="z-clearfix"> 
<div class="span12 widget-span widget-type-cell page-center content-wrapper" style="padding-bottom: 0px;" data-widget-type="cell" data-x="0" data-w="12"> 

<div class="row-fluid-wrapper row-depth-1 row-number-2 "> 
<div class="row-fluid "> 
<div class="span6 widget-span widget-type-cell main-content" style="padding: 20px 0;" data-widget-type="cell" data-x="0" data-w="6"> 

<div class="row-fluid-wrapper row-depth-1 row-number-3 "> 
<div class="row-fluid "> 
<div class="span12 widget-span widget-type-widget_container " style="" data-widget-type="widget_container" data-x="0" data-w="12"> 
<span id="hs_cos_wrapper_module_1395325065960295" class="hs_cos_wrapper hs_cos_wrapper_widget_container hs_cos_wrapper_type_widget_container" style="" data-hs-cos-general-type="widget_container" data-hs-cos-type="widget_container"><div id="hs_cos_wrapper_widget_2876866323" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text"><h2>Power Brushes for Small, Tight, And Hard-to-Reach Spaces</h2> 
<h3>End Brushes</h3> 
<p><br><img src="//cdn2.hubspot.net/hub/484035/hubfs/Landing_Pages/End_Brushes.jpg?t=1458145818376&amp;width=230" alt="End Brushes" title="End Brushes" width="230" data-constrained="true" style="width: 230px; float: left; margin: 0px 10px 0px 0px;">End brushes&nbsp;are used for cleaning, blending, polishing, deburring, and surface finishing&nbsp;recessed areas.</p> 
<p>Industrial and automotive applications include cleaning parts, polishing dies, and removing carbon deposits from piston heads, cylinders, and valve seats.</p> 
<h4>Types of End Brushes</h4> 
<p><span class="hs_cos_wrapper hs_cos_wrapper_widget_container hs_cos_wrapper_type_widget_container" data-hs-cos-general-type="widget_container" data-hs-cos-type="widget_container">Brush Research Manufacturing (BRM)&nbsp;supplies these&nbsp;types of&nbsp;end brushes:</span></p> 
<ul> 
<li><span class="hs_cos_wrapper hs_cos_wrapper_widget_container hs_cos_wrapper_type_widget_container" data-hs-cos-general-type="widget_container" data-hs-cos-type="widget_container"><span class="hs_cos_wrapper hs_cos_wrapper_widget_container hs_cos_wrapper_type_widget_container" data-hs-cos-general-type="widget_container" data-hs-cos-type="widget_container"><strong>Solid Wire</strong> for blending, cleaning, and polishing</span></span></li> 
<li><span class="hs_cos_wrapper hs_cos_wrapper_widget_container hs_cos_wrapper_type_widget_container" data-hs-cos-general-type="widget_container" data-hs-cos-type="widget_container"><span class="hs_cos_wrapper hs_cos_wrapper_widget_container hs_cos_wrapper_type_widget_container" data-hs-cos-general-type="widget_container" data-hs-cos-type="widget_container"><span class="hs_cos_wrapper hs_cos_wrapper_widget_container hs_cos_wrapper_type_widget_container" data-hs-cos-general-type="widget_container" data-hs-cos-type="widget_container"><strong>Knotted</strong>&nbsp;<strong>Wire</strong> for added aggressiveness</span></span></span></li> 
<li><span class="hs_cos_wrapper hs_cos_wrapper_widget_container hs_cos_wrapper_type_widget_container" data-hs-cos-general-type="widget_container" data-hs-cos-type="widget_container"><span class="hs_cos_wrapper hs_cos_wrapper_widget_container hs_cos_wrapper_type_widget_container" data-hs-cos-general-type="widget_container" data-hs-cos-type="widget_container"><span class="hs_cos_wrapper hs_cos_wrapper_widget_container hs_cos_wrapper_type_widget_container" data-hs-cos-general-type="widget_container" data-hs-cos-type="widget_container"><span class="hs_cos_wrapper hs_cos_wrapper_widget_container hs_cos_wrapper_type_widget_container" data-hs-cos-general-type="widget_container" data-hs-cos-type="widget_container"><strong>Circular Flared</strong>&nbsp;for side cutting action</span></span></span></span></li> 
</ul> 
<p>Most end brushes have&nbsp;carbon steel or stainless steel filaments.&nbsp;Nylon, abrasive nylon, and brass filaments are available for some solid end brushes.</p> 
<p>End brushes also differ in terms of end-style. Brushes with standard ends are great for general-purpose use.&nbsp;Banded tools have less trim and produce less flare. End brushes with coated cups protect the workpiece from contact with the metal body. &nbsp;</p> 
<h4>Which End Brush Do You Need?</h4> 
<p>Which end&nbsp;brush is right for your&nbsp;application?&nbsp;<span>Watch the video and download the BRM&nbsp;Product Catalog to&nbsp;learn more.</span></p> 
<div><iframe src="//www.youtube.com/embed/gm624K5y79k" width="425" height="350"></iframe></div></div></span> 
</div><!--end widget-span --> 
</div><!--end row--> 
</div><!--end row-wrapper --> 

</div><!--end widget-span --> 
<div class="span6 widget-span widget-type-widget_container sidebar right" style="background: #ececec;padding: 20px 80px;/*padding-bottom:30em;*/" data-widget-type="widget_container" data-x="6" data-w="6"> 
<span id="hs_cos_wrapper_module_14019004881245786" class="hs_cos_wrapper hs_cos_wrapper_widget_container hs_cos_wrapper_type_widget_container" style="" data-hs-cos-general-type="widget_container" data-hs-cos-type="widget_container"><div id="hs_cos_wrapper_module_13885068285937553" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_form" style="" data-hs-cos-general-type="widget" data-hs-cos-type="form"><h3 id="hs_cos_wrapper_module_13885068285937553_title" class="hs_cos_wrapper form-title" data-hs-cos-general-type="widget_field" data-hs-cos-type="text">Download The BRM Product Catalog</h3> 

<div id="hs_form_target_module_13885068285937553"><form novalidate="" accept-charset="UTF-8" action="https://forms.hubspot.com/uploads/form/v2/484035/67fcbcac-a5a7-44f8-93c3-81bfcc503887" enctype="multipart/form-data" id="hsForm_67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" method="POST" class="hs-form stacked hs-custom-form" data-form-id="67fcbcac-a5a7-44f8-93c3-81bfcc503887" data-reactid=".0"><fieldset class="form-columns-2" data-reactid=".0.1:$0"><div class="hs_firstname field hs-form-field" data-reactid=".0.1:$0.1:$firstname"><label class="" placeholder="Enter your First Name" for="firstname-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" data-reactid=".0.1:$0.1:$firstname.0"><span data-reactid=".0.1:$0.1:$firstname.0.0">First Name</span><span class="hs-form-required" data-reactid=".0.1:$0.1:$firstname.0.1">*</span></label><legend class="hs-field-desc" style="display:none;" data-reactid=".0.1:$0.1:$firstname.1"></legend><div class="input" data-reactid=".0.1:$0.1:$firstname.$firstname"><input id="firstname-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" class="hs-input" type="text" name="firstname" required="" value="" placeholder="" data-reactid=".0.1:$0.1:$firstname.$firstname.0"></div></div><div class="hs_lastname field hs-form-field" data-reactid=".0.1:$0.1:$lastname"><label class="" placeholder="Enter your Last Name" for="lastname-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" data-reactid=".0.1:$0.1:$lastname.0"><span data-reactid=".0.1:$0.1:$lastname.0.0">Last Name</span><span class="hs-form-required" data-reactid=".0.1:$0.1:$lastname.0.1">*</span></label><legend class="hs-field-desc" style="display:none;" data-reactid=".0.1:$0.1:$lastname.1"></legend><div class="input" data-reactid=".0.1:$0.1:$lastname.$lastname"><input id="lastname-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" class="hs-input" type="text" name="lastname" required="" value="" placeholder="" data-reactid=".0.1:$0.1:$lastname.$lastname.0"></div></div></fieldset><fieldset class="form-columns-1" data-reactid=".0.1:$1"><div class="hs_company field hs-form-field" data-reactid=".0.1:$1.1:$company"><label class="" placeholder="Enter your Company Name" for="company-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" data-reactid=".0.1:$1.1:$company.0"><span data-reactid=".0.1:$1.1:$company.0.0">Company Name</span><span class="hs-form-required" data-reactid=".0.1:$1.1:$company.0.1">*</span></label><legend class="hs-field-desc" style="display:none;" data-reactid=".0.1:$1.1:$company.1"></legend><div class="input" data-reactid=".0.1:$1.1:$company.$company"><input id="company-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" class="hs-input" type="text" name="company" required="" value="" placeholder="" data-reactid=".0.1:$1.1:$company.$company.0"></div></div></fieldset><fieldset class="form-columns-2" data-reactid=".0.1:$2"><div class="hs_phone field hs-form-field" data-reactid=".0.1:$2.1:$phone"><label class="" placeholder="Enter your Phone Number" for="phone-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" data-reactid=".0.1:$2.1:$phone.0"><span data-reactid=".0.1:$2.1:$phone.0.0">Phone Number</span><span class="hs-form-required" data-reactid=".0.1:$2.1:$phone.0.1">*</span></label><legend class="hs-field-desc" style="display:none;" data-reactid=".0.1:$2.1:$phone.1"></legend><div class="input" data-reactid=".0.1:$2.1:$phone.$phone"><input id="phone-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" class="hs-input" type="tel" name="phone" required="" value="" placeholder="" data-reactid=".0.1:$2.1:$phone.$phone.0"></div></div><div class="hs_email field hs-form-field" data-reactid=".0.1:$2.1:$email"><label class="" placeholder="Enter your Email" for="email-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" data-reactid=".0.1:$2.1:$email.0"><span data-reactid=".0.1:$2.1:$email.0.0">Email</span><span class="hs-form-required" data-reactid=".0.1:$2.1:$email.0.1">*</span></label><legend class="hs-field-desc" style="display:none;" data-reactid=".0.1:$2.1:$email.1"></legend><div class="input" data-reactid=".0.1:$2.1:$email.$email"><input id="email-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" class="hs-input" type="email" name="email" required="" placeholder="" value="" data-reactid=".0.1:$2.1:$email.$email.0"></div></div></fieldset><fieldset class="form-columns-1" data-reactid=".0.1:$3"><div class="hs_address field hs-form-field" data-reactid=".0.1:$3.1:$address"><label class="" placeholder="Enter your Street Address" for="address-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" data-reactid=".0.1:$3.1:$address.0"><span data-reactid=".0.1:$3.1:$address.0.0">Street Address</span><span class="hs-form-required" data-reactid=".0.1:$3.1:$address.0.1">*</span></label><legend class="hs-field-desc" style="display:none;" data-reactid=".0.1:$3.1:$address.1"></legend><div class="input" data-reactid=".0.1:$3.1:$address.$address"><input id="address-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" class="hs-input" type="text" name="address" required="" value="" placeholder="" data-reactid=".0.1:$3.1:$address.$address.0"></div></div></fieldset><fieldset class="form-columns-1" data-reactid=".0.1:$4"><div class="hs_city field hs-form-field" data-reactid=".0.1:$4.1:$city"><label class="" placeholder="Enter your City" for="city-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" data-reactid=".0.1:$4.1:$city.0"><span data-reactid=".0.1:$4.1:$city.0.0">City</span><span class="hs-form-required" data-reactid=".0.1:$4.1:$city.0.1">*</span></label><legend class="hs-field-desc" style="display:none;" data-reactid=".0.1:$4.1:$city.1"></legend><div class="input" data-reactid=".0.1:$4.1:$city.$city"><input id="city-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" class="hs-input" type="text" name="city" required="" value="" placeholder="" data-reactid=".0.1:$4.1:$city.$city.0"></div></div></fieldset><fieldset class="form-columns-2" data-reactid=".0.1:$5"><div class="hs_state field hs-form-field" data-reactid=".0.1:$5.1:$state"><label class="" placeholder="Enter your State/Region" for="state-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" data-reactid=".0.1:$5.1:$state.0"><span data-reactid=".0.1:$5.1:$state.0.0">State/Region</span><span class="hs-form-required" data-reactid=".0.1:$5.1:$state.0.1">*</span></label><legend class="hs-field-desc" style="display:none;" data-reactid=".0.1:$5.1:$state.1"></legend><div class="input" data-reactid=".0.1:$5.1:$state.$state"><input id="state-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" class="hs-input" type="text" name="state" required="" value="" placeholder="" data-reactid=".0.1:$5.1:$state.$state.0"></div></div><div class="hs_zip field hs-form-field" data-reactid=".0.1:$5.1:$zip"><label class="" placeholder="Enter your Postal Code" for="zip-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" data-reactid=".0.1:$5.1:$zip.0"><span data-reactid=".0.1:$5.1:$zip.0.0">Postal Code</span><span class="hs-form-required" data-reactid=".0.1:$5.1:$zip.0.1">*</span></label><legend class="hs-field-desc" style="display:none;" data-reactid=".0.1:$5.1:$zip.1"></legend><div class="input" data-reactid=".0.1:$5.1:$zip.$zip"><input id="zip-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" class="hs-input" type="text" name="zip" required="" value="" placeholder="" data-reactid=".0.1:$5.1:$zip.$zip.0"></div></div></fieldset><fieldset class="form-columns-1" data-reactid=".0.1:$6"><div class="hs_country field hs-form-field" data-reactid=".0.1:$6.1:$country"><label class="" placeholder="Enter your Country" for="country-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" data-reactid=".0.1:$6.1:$country.0"><span data-reactid=".0.1:$6.1:$country.0.0">Country</span><span class="hs-form-required" data-reactid=".0.1:$6.1:$country.0.1">*</span></label><legend class="hs-field-desc" style="display:none;" data-reactid=".0.1:$6.1:$country.1"></legend><div class="input" data-reactid=".0.1:$6.1:$country.$country"><input id="country-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" class="hs-input" type="text" name="country" required="" value="" placeholder="" data-reactid=".0.1:$6.1:$country.$country.0"></div></div></fieldset><fieldset class="form-columns-1" data-reactid=".0.1:$7"><div class="hs_hs_persona field hs-form-field" data-reactid=".0.1:$7.1:$hs_persona"><label class="" placeholder="Enter your Customer Type" for="hs_persona-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" data-reactid=".0.1:$7.1:$hs_persona.0"><span data-reactid=".0.1:$7.1:$hs_persona.0.0">Customer Type</span><span class="hs-form-required" data-reactid=".0.1:$7.1:$hs_persona.0.1">*</span></label><legend class="hs-field-desc" style="display:none;" data-reactid=".0.1:$7.1:$hs_persona.1"></legend><div class="input" data-reactid=".0.1:$7.1:$hs_persona.$hs_persona"><select id="hs_persona-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" required="" class="hs-input" name="hs_persona" data-reactid=".0.1:$7.1:$hs_persona.$hs_persona.0"><option value="" disabled="" selected="" data-reactid=".0.1:$7.1:$hs_persona.$hs_persona.0.0">- select -</option><option value="persona_1" data-reactid=".0.1:$7.1:$hs_persona.$hs_persona.0.1:$persona_1">Industrial Manufacturer</option><option value="persona_2" data-reactid=".0.1:$7.1:$hs_persona.$hs_persona.0.1:$persona_2">Industrial Distributor</option><option value="persona_3" data-reactid=".0.1:$7.1:$hs_persona.$hs_persona.0.1:$persona_3">Automotive End-User</option><option value="persona_4" data-reactid=".0.1:$7.1:$hs_persona.$hs_persona.0.1:$persona_4">Firearms End-User</option><option value="persona_5" data-reactid=".0.1:$7.1:$hs_persona.$hs_persona.0.1:$persona_5">Automotive Distributor</option><option value="persona_6" data-reactid=".0.1:$7.1:$hs_persona.$hs_persona.0.1:$persona_6">Other</option></select></div></div></fieldset><fieldset class="form-columns-1" data-reactid=".0.1:$8"><div class="hs_industry_dropdown field hs-form-field" data-reactid=".0.1:$8.1:$industry_dropdown"><label class="" placeholder="Enter your Application" for="industry_dropdown-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" data-reactid=".0.1:$8.1:$industry_dropdown.0"><span data-reactid=".0.1:$8.1:$industry_dropdown.0.0">Application</span><span class="hs-form-required" data-reactid=".0.1:$8.1:$industry_dropdown.0.1">*</span></label><legend class="hs-field-desc" style="display:none;" data-reactid=".0.1:$8.1:$industry_dropdown.1"></legend><div class="input" data-reactid=".0.1:$8.1:$industry_dropdown.$industry_dropdown"><select id="industry_dropdown-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" required="" class="hs-input" name="industry_dropdown" data-reactid=".0.1:$8.1:$industry_dropdown.$industry_dropdown.0"><option value="" disabled="" selected="" data-reactid=".0.1:$8.1:$industry_dropdown.$industry_dropdown.0.0">- select -</option><option value="Aerospace" data-reactid=".0.1:$8.1:$industry_dropdown.$industry_dropdown.0.1:$Aerospace">Aerospace</option><option value="Automotive" data-reactid=".0.1:$8.1:$industry_dropdown.$industry_dropdown.0.1:$Automotive">Automotive</option><option value="Earth Moving Equipment" data-reactid=".0.1:$8.1:$industry_dropdown.$industry_dropdown.0.1:$Earth Moving Equipment">Earth Moving Equipment</option><option value="Firearms" data-reactid=".0.1:$8.1:$industry_dropdown.$industry_dropdown.0.1:$Firearms">Firearms</option><option value="Forming and Fabricating" data-reactid=".0.1:$8.1:$industry_dropdown.$industry_dropdown.0.1:$Forming and Fabricating">Forming and Fabricating</option><option value="Fluid Power" data-reactid=".0.1:$8.1:$industry_dropdown.$industry_dropdown.0.1:$Fluid Power">Fluid Power</option><option value="General Industrial Manufacturing" data-reactid=".0.1:$8.1:$industry_dropdown.$industry_dropdown.0.1:$General Industrial Manufacturing">General Industrial Manufacturing</option><option value="Hydraulics" data-reactid=".0.1:$8.1:$industry_dropdown.$industry_dropdown.0.1:$Hydraulics">Hydraulics</option><option value="Marine" data-reactid=".0.1:$8.1:$industry_dropdown.$industry_dropdown.0.1:$Marine">Marine</option><option value="Metalworking" data-reactid=".0.1:$8.1:$industry_dropdown.$industry_dropdown.0.1:$Metalworking">Metalworking</option><option value="MRO" data-reactid=".0.1:$8.1:$industry_dropdown.$industry_dropdown.0.1:$MRO">MRO</option><option value="Musical Instruments" data-reactid=".0.1:$8.1:$industry_dropdown.$industry_dropdown.0.1:$Musical Instruments">Musical Instruments</option><option value="Oil and Gas" data-reactid=".0.1:$8.1:$industry_dropdown.$industry_dropdown.0.1:$Oil and Gas">Oil and Gas</option><option value="Welding" data-reactid=".0.1:$8.1:$industry_dropdown.$industry_dropdown.0.1:$Welding">Welding</option><option value="Military" data-reactid=".0.1:$8.1:$industry_dropdown.$industry_dropdown.0.1:$Military">Military</option><option value="Other" data-reactid=".0.1:$8.1:$industry_dropdown.$industry_dropdown.0.1:$Other">Other</option></select></div></div></fieldset><fieldset class="form-columns-1" data-reactid=".0.1:$9"><div class="hs_comments field hs-form-field" data-reactid=".0.1:$9.1:$comments"><label class="" placeholder="Enter your Comments" for="comments-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" data-reactid=".0.1:$9.1:$comments.0"><span data-reactid=".0.1:$9.1:$comments.0.0">Comments</span></label><legend class="hs-field-desc" style="display:none;" data-reactid=".0.1:$9.1:$comments.1"></legend><div class="input" data-reactid=".0.1:$9.1:$comments.$comments"><textarea id="comments-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" class="hs-input" name="comments" placeholder="" data-reactid=".0.1:$9.1:$comments.$comments.0"></textarea></div></div></fieldset><fieldset class="form-columns-1" data-reactid=".0.1:$10"><div class="hs_lifecyclestage field hs-form-field" style="display:none;" data-reactid=".0.1:$10.1:$lifecyclestage"><label class="" placeholder="Enter your Lifecycle Stage" for="lifecyclestage-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" data-reactid=".0.1:$10.1:$lifecyclestage.0"><span data-reactid=".0.1:$10.1:$lifecyclestage.0.0">Lifecycle Stage</span></label><legend class="hs-field-desc" style="display:none;" data-reactid=".0.1:$10.1:$lifecyclestage.1"></legend><div class="input" data-reactid=".0.1:$10.1:$lifecyclestage.$lifecyclestage"><input name="lifecyclestage" class="hs-input" type="hidden" value="marketingqualifiedlead" data-reactid=".0.1:$10.1:$lifecyclestage.$lifecyclestage.0"></div></div></fieldset><fieldset class="form-columns-1" data-reactid=".0.1:$11"><div class="hs_campaign field hs-form-field" style="display:none;" data-reactid=".0.1:$11.1:$campaign"><label class="" placeholder="Enter your Campaign" for="campaign-67fcbcac-a5a7-44f8-93c3-81bfcc503887_8120" data-reactid=".0.1:$11.1:$campaign.0"><span data-reactid=".0.1:$11.1:$campaign.0.0">Campaign</span></label><legend class="hs-field-desc" style="display:none;" data-reactid=".0.1:$11.1:$campaign.1"></legend><div class="input" data-reactid=".0.1:$11.1:$campaign.$campaign"><input name="campaign" class="hs-input" type="hidden" value="Website" data-reactid=".0.1:$11.1:$campaign.$campaign.0"></div></div></fieldset><div class="hs_submit" data-reactid=".0.3"><div class="hs-field-desc" style="display:none;" data-reactid=".0.3.0"></div><div class="actions" data-reactid=".0.3.1"><input type="submit" value="Submit" class="hs-button primary large" data-reactid=".0.3.1.0"></div></div><input name="hs_context" type="hidden" value="{&quot;pageUrl&quot;:&quot;http://info.brushresearch.com/end-brushes&quot;,&quot;pageTitle&quot;:&quot;End Brushes| Power Brushes | BRM&quot;,&quot;isHostedOnHubspot&quot;:true,&quot;timestamp&quot;:1458148249926,&quot;userAgent&quot;:&quot;Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36&quot;,&quot;referrer&quot;:&quot;http://stackoverflow.com/questions/36018345/why-is-clearfix-not-working-on-this-column&quot;,&quot;hutk&quot;:&quot;d54500098a6cf0a8c80e3558e469aada&quot;,&quot;originalEmbedContext&quot;:{&quot;portalId&quot;:&quot;484035&quot;,&quot;formId&quot;:&quot;67fcbcac-a5a7-44f8-93c3-81bfcc503887&quot;,&quot;formInstanceId&quot;:&quot;8120&quot;,&quot;pageId&quot;:3854020261,&quot;pageName&quot;:&quot;End Brushes| Power Brushes | BRM&quot;,&quot;redirectUrl&quot;:&quot;http://info.brushresearch.com/brm-product-catalog-thank-you&quot;,&quot;css&quot;:&quot;&quot;,&quot;target&quot;:&quot;#hs_form_target_module_13885068285937553&quot;,&quot;contentType&quot;:&quot;landing-page&quot;,&quot;formData&quot;:{&quot;cssClass&quot;:&quot;hs-form stacked hs-custom-form&quot;}},&quot;formName&quot;:&quot;Request Literature Catalog, Flex-Hone, &amp; Nampower&quot;,&quot;recentFieldsCookie&quot;:{},&quot;pageId&quot;:&quot;3854020261&quot;,&quot;pageName&quot;:&quot;End Brushes| Power Brushes | BRM&quot;,&quot;boolCheckBoxFields&quot;:&quot;&quot;,&quot;dateFields&quot;:&quot;&quot;,&quot;redirectUrl&quot;:&quot;http://info.brushresearch.com/brm-product-catalog-thank-you&quot;,&quot;formInstanceId&quot;:&quot;8120&quot;,&quot;smartFields&quot;:{},&quot;urlParams&quot;:{},&quot;formValidity&quot;:{}}" data-reactid=".0.4"></form></div> 

这里有一个HubSpot模板页面的后端屏幕截图:

Screenshot of the Hubspot Backend

回答

0

您可以在父元素添加类:

<div class="row-fluid " style="position: relative;"> 

你可以做你的侧边栏右:

element.style { 
    background: #ececec; 
    padding: 20px 80px; 
    position: absolute; 
    right: 0; 
    height: 100%; 
    /* padding-bottom: 30em; */ 
} 

我试着和它的作品。

希望有帮助

0

感谢您的帮助。所以为了澄清,我将.row-fluid类添加到特定的元素中?

然后我将提供的CSS代码应用于.sidebar.right?

相关问题