セマンティックUI：コンテンツの高さに拡大するためにクリアセグメントを取得

Question

クリアリングセグメントを使用してフローティングボタンをクリアしていますが、セグメントがコンテンツの高さまで拡大していないようです。

コンテンツに合わせて高さを広げるにはどうすればよいですか？

例JSFiddle：https://jsfiddle.net/ftwL2whn/

/* View rubrics */ 
 
    
 
    .ui.centered.button-header.header { 
 
     position: absolute; 
 
     z-index: 1; 
 
     right: 0; 
 
     left: 0; 
 
    } 
 
    
 
    .ui.button.floated.button-header { 
 
     position: relative; 
 
     z-index: 2; 
 
    } 
 
    
 
    .ui.labeled.icon.button > .dark.icon { 
 
     background-color: rgba(0, 0, 0, .1); 
 
    } 
 
    /* Edit Rubric Input*/ 
 
    
 
    .edit.rubric.input { 
 
     display: inline-block; 
 
     margin: 0.2em; 
 
     width: 250px; 
 
    } 
 
    
 
    .edit.rubric.wide.input { 
 
     display: inline-block; 
 
     width: 300px; 
 
    } 
 
    
 
    .edit.rubric.narrow.input { 
 
     display: inline-block; 
 
     width: 200px; 
 
    } 
 
    
 
    .edit.rubric.input input { 
 
     border: none; 
 
     width: 100%; 
 
     border-bottom: 1px solid #D4D4D5; 
 
    } 
 
    
 
    .edit.rubric.input input:focus { 
 
     outline: none; 
 
     border-color: transparent; 
 
     transition: 300ms ease all; 
 
    } 
 
    
 
    .bar:after { 
 
     content: ''; 
 
     display: block; 
 
     transform: scaleX(0); 
 
     height: 2px; 
 
     background: #48afb9; 
 
     transition: 300ms ease all; 
 
    } 
 
    
 
    .edit.rubric.input input:focus ~ .bar:after { 
 
     transform: scaleX(1); 
 
    } 
 
    
 
    .centered .edit.rubric.input input { 
 
     text-align: center; 
 
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet"/> 
 
<br> 
 
<div class="ui container"> 
 
    <div class="ui top attached clearing segment"> 
 
     <h3 class="ui centered button-header header"> 
 
      <div class="edit rubric input"> 
 
       <input type="text" value="Phone QA"> 
 
       <span class="bar"></span> 
 
      </div> 
 
      <div class="sub header"> 
 
       <div class="edit rubric wide input"> 
 
        <input type="text" value="Create and edit rubrics here"> 
 
        <span class="bar"></span> 
 
       </div> 
 
      </div> 
 
     </h3> 
 
     <div class="ui left floated left labeled icon orange button-header button"> 
 
      Back 
 
      <i class="dark left arrow icon"></i> 
 
     </div> 
 
    </div>  
 
</div>

Answer 1

セマンティック追加クリアセグメントのコード：あなたのdevのツールを開くと

.ui.clearing.segment::after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 

問題がheight: 0;の第三の特性であります選択した高さプロパティを解除すると、高さの調整が表示されますコンテンツの100％をカバーするこれをオーバーライドする

一つの方法は、あなたのメインのCSSファイル内でこのような何かを行うことです。

.ui.clearing.segment::after { 
    height: 1.5em; 
    }