在我们的网站上：https://dev.shiftdivorceguide.com/在桌面上一切看起来都很棒。 当我切换到平板电脑等较小的屏幕时，屏幕右侧会出现填充。当我使用更小的智能手机时，屏幕右侧会出现更大的填充区域。
我不确定顶部的“紧急按钮”栏是否可能干扰页面代码（.panic-button-container）。我已经尝试过更改媒体查询中的CSS。为了减小平板电脑上白色区域的大小，我更改了以下有关徽标和导航宽度的代码。
我更改了：
public class Statistic {
private BarChart barChart;
private LineChart lineChart;
private PieChart pieChart;
private StatisticsViewModel statisticsViewModel;
private ValueFormatter customValueFormatter;
public Statistic(BarChart barChart, LineChart lineChart, PieChart pieChart) {
this.barChart = barChart;
this.lineChart = lineChart;
this.pieChart = pieChart;
}
public void barChart(AxesStatisticsResult axesStatisticsResult) {
barChart.fitScreen();
barChart.clear();
barChart.setDrawBarShadow(false);
barChart.setDoubleTapToZoomEnabled(false);
barChart.animateXY(1000, 1000);
barChart.setDrawValueAboveBar(true);
barChart.zoom(1.5f, 0, 0, 1.5f);
barChart.setPinchZoom(false);
barChart.setDrawGridBackground(true);
ArrayList<BarEntry> barEntries = new ArrayList<>();
barEntries = getBarEntryDataList(axesStatisticsResult);
BarDataSet barDataSet = new BarDataSet(barEntries, "");
barDataSet.setColors(ColorTemplate.COLORFUL_COLORS);
barDataSet.setValueTextSize(10);
BarData data = new BarData(barDataSet);
barChart.setData(data);
XAxis xAxis = barChart.getXAxis();
xAxis.setTextSize(10);
xAxis.setGranularityEnabled(true);// egységnyi beosztás
xAxis.setGranularity(1f);
xAxis.setValueFormatter(new IndexAxisValueFormatter(axesStatisticsResult.getStatisticsNameAsTmb()));
xAxis.setPosition(XAxis.XAxisPosition.TOP);
xAxis.setLabelRotationAngle(45);
}
public void lineChart(AxesStatisticsResult axesStatisticsResult) {
lineChart.clear();
lineChart.fitScreen();
lineChart.setDragEnabled(true);
lineChart.setScaleEnabled(true);
lineChart.setDoubleTapToZoomEnabled(false);
lineChart.setExtraTopOffset(30.0f);
lineChart.animateXY(1000, 1000);
LimitLine upper_limit = new LimitLine(axesStatisticsResult.getUpperExtremeFloatValue(), "Kiugróan magas");
upper_limit.setLineWidth(4f);
upper_limit.enableDashedLine(10f, 10f, 0f);
upper_limit.setLabelPosition(LimitLine.LimitLabelPosition.RIGHT_BOTTOM);
upper_limit.setTextSize(10f);
LimitLine lower_limit = new LimitLine(axesStatisticsResult.getLowerExtremeFloatValue(), "Kiugróan alacsony");
lower_limit.setLineWidth(4f);
lower_limit.enableDashedLine(10f, 10f, 0f);
lower_limit.setLabelPosition(LimitLine.LimitLabelPosition.RIGHT_BOTTOM);
lower_limit.setTextSize(10f);
YAxis leftAxis = lineChart.getAxisLeft();
leftAxis.removeAllLimitLines();
leftAxis.addLimitLine(upper_limit);
leftAxis.addLimitLine(lower_limit);
leftAxis.enableGridDashedLine(10f, 10f, 0);
leftAxis.setDrawLimitLinesBehindData(true);
lineChart.getAxisRight().setEnabled(false);
ArrayList<Entry> yValues = new ArrayList<>();
yValues = getLineChartDataList(axesStatisticsResult);
LineDataSet set1 = new LineDataSet(yValues, "");
set1.setFillAlpha(110);
set1.setColor(Color.BLUE);
set1.setLineWidth(3f);
set1.setValueTextSize(15f);
set1.setValueTextColor(Color.DKGRAY);
ArrayList<ILineDataSet> dataSets = new ArrayList<>();
dataSets.add(set1);
LineData data = new LineData(dataSets);
lineChart.setData(data);
XAxis xAxis = lineChart.getXAxis();
xAxis.setGranularityEnabled(true);
xAxis.setGranularity(1f);
xAxis.setTextSize(10);
xAxis.setValueFormatter(new IndexAxisValueFormatter(axesStatisticsResult.getStatisticsNameAsTmb()));
xAxis.setPosition(XAxis.XAxisPosition.TOP);
xAxis.setDrawGridLines(true);
xAxis.setLabelCount(25);
xAxis.setLabelRotationAngle(45);
}
public void pieChart(AxesStatisticsResult axesStatisticsResult) {
pieChart.clear();
lineChart.fitScreen();
pieChart.setUsePercentValues(true);
pieChart.getDescription().setEnabled(false);
pieChart.setExtraOffsets(5, 10, 5, 5);
pieChart.setDragDecelerationFrictionCoef(0.99f);
pieChart.setDrawHoleEnabled(false);
pieChart.setHoleColor(Color.WHITE);
pieChart.setTransparentCircleRadius(61f);
pieChart.animateY(1000, Easing.EaseInCubic);
ArrayList<PieEntry> yValues = new ArrayList<>();
yValues = getPieEntryDataList(axesStatisticsResult);
PieDataSet dataSet = new PieDataSet(yValues, " ");
dataSet.setSliceSpace(1f);
dataSet.setSelectionShift(5f);
dataSet.setColors(ColorTemplate.JOYFUL_COLORS);
PieData data = new PieData(dataSet);
data.setValueTextSize(20f);
data.setValueTextColor(Color.DKGRAY);
pieChart.setData(data);
}
private ArrayList<Entry> getLineChartDataList(AxesStatisticsResult axesStatisticsResult) {
ArrayList<Entry> entryArrayList = new ArrayList<>();
for (int i = 0; i < axesStatisticsResult.size(); i++) {
entryArrayList.add(new Entry(i, axesStatisticsResult.get(i).getSingleStatisticsFloatValue()));
}
return entryArrayList;
}
private ArrayList<PieEntry> getPieEntryDataList(AxesStatisticsResult axesStatisticsResult) {
ArrayList<PieEntry> pieEntryArrayList = new ArrayList<>();
ArrayList<PieEntry> yValues = new ArrayList<>();
for (int i = 0; i < axesStatisticsResult.size(); i++) {
pieEntryArrayList.add(new PieEntry(axesStatisticsResult.get(i).getSingleStatisticsFloatValue(), axesStatisticsResult.get(i).getSingleStatisticsName() + " %"));
}
return pieEntryArrayList;
}
private ArrayList<BarEntry> getBarEntryDataList(AxesStatisticsResult axesStatisticsResult) {
ArrayList<BarEntry> barEntryArrayList = new ArrayList<>();
for (int i = 0; i < axesStatisticsResult.size(); i++) {
barEntryArrayList.add(new BarEntry(i, axesStatisticsResult.get(i).getSingleStatisticsFloatValue()));
}
return barEntryArrayList;
}
}
收件人：
@media (max-width: 1024px) and (min-width: 981px) {
.header-right-panel {
width: 40%;
float: right;
}
}
这对布局有所帮助，但在较小的屏幕上我仍然出现白色条。智能手机是最糟糕的。任何可能的解决方案将不胜感激。
答案 0 :(得分：1)
使用浮点数停止。使用Flexbox。 clearfix div太多了。
很显然，页脚已超出网站内容body以及其他一些元素。
如果您真的想缩小范围，请设置以下样式：
* { outline: 1px solid red }
这样一来，您可以查看哪个容器过度扩展，然后将其宽度设置为100％，而不是固定宽度。
编辑2：
使用我的技术，我缩小了问题的范围：
.footer-menu
删除width: 500px;
.lp-section-content row
删除所有负边距
.vc_column-inner vc_custom_1548439628787
删除所有padding