div class="container"のmarginを消したいのですが、消えないどころかmargin:0;を指定しても1枚目の画像のように勝手にmarginが生成されてしまいます。1枚目ですと右側に勝手にmarginが作られているので、ならばとmargin-right:0;を追記すると、なぜか2枚目の画像のように今度は反対側にmarginが生成されます。ちなみにmarginを指定しないと両側にmarginが生成されmargin:0 autoのように中央に配置されます。
containerのmarginを消して(勝手に生成しないようにして)画面いっぱいにしたいのですが、どうすればよいでしょうか。
chat.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="java.util.*" %> <%@ page import="model.*" %> <%@ page import="java.sql.Timestamp" %> <%@ page import="java.io.InputStream" %> <%@ page import="java.io.InputStreamReader" %> <%@ page import="java.io.BufferedReader" %> <!DOCTYPE html> <% List<MessageDto> dtoList = (List<MessageDto>)request.getAttribute("ShowAllMessage"); HttpSession sess = request.getSession(); UserInfoDto userInfoOnSession = (UserInfoDto)sess.getAttribute("LOGIN_INFO"); %> <html> <head> <meta charset="UTF-8"> <meta name=”viewport” content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> <title>chatroom</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <link rel="stylesheet" href="<%=request.getContextPath() %>/css/room.css"> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ </nav> <div class="container"> //←これのmarginをどうにかしたい <div class="chat_screen"> <% //javaの処理のため割愛 %> <div class="chat_box"> <div class="username_box"> <p class="username"> <%=userName%></p> </div> <%if(image != null){ %> <img src="data:image/*;base64,<%=image%> "> <%} %> <div class="message_box"> <p class="message" id="message_text"> <%=message%></p> </div> <div class="created_at_box"> <p class="created_at"> <%=time%></p> </div> <%if(userName.equals(userInfoOnSession.getUserName())) {%> <form action="EditMessage" method="post"> <div class="edit_message_box"> <input type="hidden" name="message_id" value="<%=messageId %>"> <input type="hidden" name="edit_message_text" id="edit_message_text" value="" > <input type="submit" class="edit_message_button btn btn-outline-secondary" value="メッセージを編集する" onclick="return editConfirm();"> </div> </form> <%} %> <%if(userName.equals(userInfoOnSession.getUserName())) {%> <form action="DeleteMessage" method="post"> <div class="delete_message_box"> <input type="hidden" name="message_id" value="<%=messageId %>"> <input type="submit" class="delete_message_button btn btn-outline-secondary" value="メッセージを削除する" onclick="return confirmCheck();"> </div> </form> <%} %> </div> <% } %> </div> <div class="submit_box"> <form action="InputMessage" enctype="multipart/form-data" method="post"> <div class="textarea_box"> <textarea id="input_message_text" name="message" size="40" maxlength="500" class="input_message_text form-control"></textarea> </div> <div class="submit_image_box"> <input type="file" name="image" accept="image/*" class="image_submit_button" id="image_submit"> </div> <div class="submit_button_box"> <input type="submit" id="message_submit"value="投稿する" class="send_message_button btn btn-info" onclick="return brankCheck();"> </div> </form> <form action="DeleteMessage" method="get"> <div class="delete_button_box"> <input type="submit" id="delete_button"value="全件削除" class="send_delete_button"> </div> </form> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/js/Messagebrank.js" ></script> <script type="text/javascript" src="<%=request.getContextPath()%>/js/deleteConfirm.js" ></script> <script type="text/javascript" src="<%=request.getContextPath()%>/js/editConfirm.js" ></script> <script type="text/javascript" src="<%=request.getContextPath() %>/js/xssEscape.js" > </script> </body> </html>
room.css
1*{ 2 margin:0; 3 padding:0; 4} 5body{ 6 background:#9ee0d6; 7 font-family:"Meiryo"; 8 width:100%; 9 10 11} 12head{ 13 14} 15.chatroom_title_box{ 16 17 18} 19.navbar-brand{ 20 font-size:40px; 21} 22.collapse{ 23 24} 25.navber-brand{ 26 display:inline-block; 27} 28.container{ 29 width:100%; 30 min-height:100vh; 31 margin:0; 32 padding:0; 33 display:flex; 34 overflow:hidden; 35} 36.chat_screen{ 37 min-height:100vh; 38 background:white; 39 width:100%; 40 float:right; 41 margin-right:0; 42 43} 44.chat_box{ 45 46} 47.username_box{ 48 49} 50.username{ 51 52} 53.image{ 54 55} 56.message_box{ 57 58} 59.message{ 60 61} 62.created_at_box{ 63 64} 65.create_at{ 66 67} 68.submit_box{ 69 margin:40px 30px 30px 30px; 70} 71.textarea_box{ 72 width:100%; 73 74} 75
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/09/21 00:14