0
に存在する2つのdivを整列させます。 div 1は75％幅に設定され、2番目のdivは25％に設定されます。ユーザーは、アプリケーションのテーマを使用してdiv 1とdiv 2の位置を切り替えることができます。どのように自動私は親divの内側の2つのdivを持つ親のdiv
.docTOCDiv li.iconPage:hover {
text-decoration: none;
}
div.docPage {
background-color: #ffffff;
background-image: none;
border-color: #ffffff;
border-style: solid;
border-width: 0;
}
.docToggleFull {
background-color: #002a5c;
background-image: url("/site_assets/images/doc_style/murraystate/murraystate_banner.png");
background-position: right top;
background-repeat: no-repeat;
padding-left: 0.5em;
}
div.hideTOC {
margin-top: 1em;
}
.docTOCDiv {
background: transparent none repeat scroll 0 0;
border: medium none;
left: 0.2em;
margin: 8em 0 0 0.2em;
padding: 0.5em;
position: absolute;
top: 0;
}
h3.docPageH3 {
border-bottom: medium none;
color: #002a5c;
font-size: 18px;
font-weight: normal;
line-height: 2em;
margin: 0;
padding-left: 0.5em;
}
div.docPageCorner {
line-height: 0;
}
.docTOCDiv li.iconPage a:link, .docTOCDiv li.iconPage a:active, .docTOCDiv li.iconPage a:visited {
color: #ffffff;
}
.docToggle {
background-color: #002a5c;
background-image: url("/site_assets/images/doc_style/murraystate/murraystate_banner.png");
background-position: right top;
background-repeat: no-repeat;
padding-left: 18em;
}
div.docSection {
background-color: #ffffff;
border-color: #1e5127;
border-style: solid;
border-width: 0;
margin-bottom: 1.2em;
margin-top: 0.2em;
padding: 0.5em;
}
.docTOCDiv li.iconSection a:link, .docTOCDiv li.iconSection a:active, .docTOCDiv li.iconSection a:visited {
color: #ffffff;
}
div.docPageBottom {
background-image: none;
}
.docTOCDiv ul, .docTOCDiv ul:hover {
background: #6699cc none repeat scroll 0 0;
}
.docTOCDiv li.iconSection:hover, .docTOCDiv li.iconSection a:hover {
color: #93b1d5;
text-decoration: none;
}
div.docDiv {
background-color: #002a5c;
background-image: none;
}
div.docPageBottomCorner {
background-image: none;
}
.docTOCDiv ul:hover {
background-image: none;
}
div.editPage {
margin: 1em;
}
.docTOCDiv ul.sectionLevel, .docTOCDiv ul.sectionLevel:hover {
background: #6699cc none repeat scroll 0 0;
color: #93b1d5;
}
div.docSection p {
color: #000000;
font-size: 11px;
}
div.pagination {
padding: 1em;
}
h2.docDivH2 {
background-color: #ffcc00;
border: 3px solid #fff;
color: #000033;
font-size: 21px;
font-weight: bold;
line-height: 120%;
margin: 0;
padding: 0.5em;
}
.docTOCDiv div.pageTOCBottom {
border-color: #3b6289;
line-height: 0;
}
div.submitDivLeft {
border: medium none;
margin-top: 6em;
}
div.ifLeftTOC {
float: left;
margin-top: -0.4em;
}
.docTOCDiv h5 {
background-color: #6699cc;
border: medium none;
color: #fff;
font-size: 13px;
font-weight: bold;
margin: 1.1em 0 0;
padding: 0.5em;
}<div id="doc" class="contentDiv" style="width: 105.4%;">
<!-- Document Section starts here -->
<div class="sectionDiv docToggle" id="docToggleDiv">
<!-- Doc Table of Content starts -->
<div id="docTOC" class="docTOCDiv" style="height: 440px;">
<div class="submitDivLeftFloat clearfix">
<div id="toggle-toc" style="margin-top: 0px;">
<a title="Hide Page List" class="iconButton hide">Hide</a>
</div>
</div>
<h5>Page List</h5>
<div id="allPages" class="allPages" style="height: 315px; overflow-y: auto; overflow-x: hidden;">
<div class="">
<ul id="sections-toc-ul-47631849">
<li class="iconPage">
<a href="/doc/10672558/47631849" class="pageTitle_47631849">DYO Page</a></li>
</ul>
</div>
</div>
<table><tbody><tr>
<td><div class="button" id="add_page" style="margin-top: 10px;"><a tabindex="0" title="Add new page" class="iconOnlyButton add"> </a></div></td>
<td><div class="button" id="manage_pages" style="margin-left: 5px; margin-top: 10px;"><a tabindex="0" class="iconButton edit">Manage Pages</a></div></td>
</tr></tbody></table>
</div>
<!-- Doc Table of Content ends -->
<div id="pagesArea">
<div class="button pull-right" id="manage_content_button_47631849">
<a tabindex="0" class="iconButton edit">Manage Content</a>
</div>
<div class="floatLeft">
<h2 class="docDivH2 pageTitle_47631849">DYO Page</h2>
</div>
<a tabindex="0" id="pageTitleEdit_47631849">edit title</a>
<div id="page_body_47631849" class="docPage clear">
<div class="docPageSider">
<div class="grayMessageDiv">
<div class="noSectionsMessage">
Currently, there is no content on this page.To add content to this page, select a content type:<div class="newSectionDropdown_47631849 button dropdown" id=""></div> \t \t \t \t \t \t \t <a class="iconOnlyButton add" title="Add new content"> </a>
</div>
</div>
</div>
</div>
</div>
<!-- Document Section ends here -->
</div>各テーマに関連したCSSファイルがたくさんあるので、私たちは、すべてのCSSプロパティを変更したり、更新することはできません。 divを正確に垂直に整列することはできません。 Jqueryを使ってdivの高さを設定することを考えました。 #docToggleDivはマスターdivです。 #docTOCは常に#docToggleDivの高さでなければなりません。ここでは画像の一部を追加
<script>
jQuery.noConflict();
jQuery(document).ready(function() {
var sectionDivHeight = jQuery('#docToggleDiv').height() ;
var docTOCDivHeight = jQuery('#docTOC').height() ;
// since doc view page doesn't has the right side quick links, we can increase the size of the container a little more.
// The right side edge of the container is inline with the author or creator name displayed on the right top corner
jQuery('.contentDiv').css("width", "105.4%");
if (sectionDivHeight < docTOCDivHeight) {
// in rest all test cases, the table of contents list height should adhere to the height of the section div
// This is required when the TOC is on the left side and the hide button is way off the top border
jQuery('#docTOC').css("height", sectionDivHeight);
jQuery('#toggle-toc').css("margin-top", "0px");
// this is to make the TOC plus signs appear within the viewable area in the TOC
//jQuery('#docTOC').find('li.iconPage').css("margin", "0 0.7em 0 0");
// The 125 which I have set is an average value after checking all the docs in the ticket RT119492
jQuery('#allPages').css("height", sectionDivHeight - 125);
jQuery('#allPages').css("overflow-y", "auto");
jQuery('#allPages').css("overflow-x", "hidden");
// The add page and Manage Pages button are touching the Scrollbar
jQuery('#add_page').css("margin-top", "10px");
jQuery('#manage_pages').css("margin-left", "5px");
jQuery('#manage_pages').css("margin-top", "10px");
// this is to make the TOC plus signs appear within the viewable area in the TOC
jQuery('#allPages').find('div.TOCcollapsed').css("width", "14em");
}
}); // END of Jquery Ready Block<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>：ここ
は、私は今のjQueryを使ってまでしようとしているものです。
oftopic：あなたは（CSSを使用することができます）ずっと楽： '$のelem.css（{高さ：123、幅：13}）'、1でそれらのすべてを兼ね備えています。彼らの文書を読んだら、あなたは例を見るでしょう – Martijn
関連するHTMLも提供してください。 – hallleron
@JamesDouglasはい、それはすべてCSSのためです。テーマを使用しているのでそのほとんどはオンザフライで搭載されています。私はCSSファイルを追加しようとします。 –