クローズボタンのCSS位置

私は下部にクローズボタン付きのモーダルを持っています。それは、上のコメントセクションの長さに応じて上下に動いているようです。コメント欄がどれほど長くても、その位置を下に固定しようとしています。だから私はの相対を使用しましたが、あなたがこれを修正する方がいい考えがあれば、私は感謝しています。ありがとう。クローズボタンのCSS位置

ビュー：

<div class="form-horizontal"> 
    <div class="modal-title title"> 
     <p>@ViewBag.name<span> Info</span></p> 
    </div> 
    <div id="info"> 
     <p>@Html.Label("Name: ") @ViewBag.name</p> 
     <p>@Html.Label("Age: ") @ViewBag.age</p> 
     <p>@Html.Label("Comment: ") @ViewBag.comment</p> 
    </div> 
    <div id="close"> 
     <div class="col-md-12"> 
      <input type="button" id="closeButton" value="Close" class="btn btn-default" /> 
     </div> 
    </div> 
</div>

CSS：固定とのthatsはあなたが望む場合は一番下にそれをシンク：

.btn { 
    border: 2px solid transparent; 
    background: white; 
    color: black; 
    font-size: 16px; 
    line-height: 15px; 
    padding: 10px 0; 
    display: block; 
    width: 150px; 
    margin: 0 auto; 
} 
.title { 
    position: relative; 
    top: 20px; 
} 
.title p { 
    text-align: center; 
    font-size: 30px; 
} 
.title span { 
    color: black; 
} 
#info {  
    position: relative;  
    top: 50px; 
    left: 20px; 
} 
#info p { 
    font-size: 15px !important; 
    width: 310px; 
} 
#close { 
    position: relative; 
    top: 70px; 
}

出典

2016-09-14 pavilion

ちょうど体がそうボタン位置

enter code h

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<style> 
 
</style> 
 
<body> 
 

 
<div class="container"> 
 
    <h2>Modal Example</h2> 
 
    <!-- Trigger the modal with a button --> 
 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body" style="height:200px; overflow-y:scroll;"> 
 
      <p>@Html.Label("Name: ") @ViewBag.name</p> 
 
     <p>@Html.Label("Age: ") @ViewBag.age</p> 
 
     <p>@Html.Label("Comment: ") @ViewBag.comment</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <input type="button" id="closeButton" value="Close" class="btn btn-default" /> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
    
 
</div> 
 

 
</body> 
 
</html>

ERE

出典

2016-09-14 19:22:00 C1234

ちょうど位置を追加します。

#close { 
    position: fixed; 
    bottom: 0px; 
    left: 50%; 
}

出典

2016-09-14 19:06:58 Keith

を変更アウトでスクロールできるようにモーダル本体に固定された高さを与えたが、画面サイズに依存します（例：フルスクリーンでF11を押した場合）それは箱から出ます。画面の解像度にかかわらず、そのボタンをモーダルの一番下に固定するにはどうすればよいですか？ – pavilion

私はフィドルからf11を押したが、私はまだそれを底に見る – Keith

クローズボタンのCSS位置

答えて

関連する問題